I think @khilley made a particularly relevant information about using Bootstrap standard markup and inline javascript components. Here are some reasons why:

• Your current approach is using duplicate markup (for your menu). It is not DRY or affordable and it takes more effort to do it.
• If you don't need to write your own javascript, you save development and testing time and a couple of bytes of download for your users.
• Twitter Bootstrap is used on millions of websites, so it is tested daily by millions of people on millions of different device / OS / resolution combinations around the world. When you use standard markup and javascript component plugins, you have the advantage of knowing that it will just work.

What's more, you can easily reproduce all of your navigation behavior with just some styling, including using built-in affix markup to handle changes in your navbar. Pretty sweet!

DEMO

Several changes have been made to your markup and css. You can remove your custom javascript entirely, except for one click handler that you use to scroll to different sections.

Replace all navigation styles and markup as follows:

HTML:

<nav class="navbar nav-custom navbar-fixed-top" data-spy="affix" data-offset-top="80" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="glyphicon glyphicon-th-list"></span>
            </button>
            <span class="rc">RC</span>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active">
                    <a href="#home">Home</a>
                </li>
                <li>
                    <a href="#design">Design</a>
                </li>
                <li>
                    <a href="#develop">Develop</a>
                </li>
                <li>
                    <a href="#contact">Contact</a>
                </li>                
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

      

        
        
        
      

    

CSS

.nav-custom {
    width: 100%;
    height: 80px;
    z-index: 999;
    padding: 25px;
    background-color: #f87f73;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    font-size: 150%;
    color: #fff;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}
.nav-custom.affix {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    color: #f87f73;
    height: 60px;
    padding: 14px;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}
.nav-custom .rc {
    background-color: #fff;
    color: #f87f73;
    padding: 5px;
    border-radius: 50% 0% 50% 0%;
    float: none;
}
.nav-custom.affix .rc {
    background-color: #f87f73;
    color: #fff;
}
.nav-custom.affix .navbar-collapse {
    top: 60px;
}
.nav>li>a:hover, .nav>li>a:focus {
    background-color: transparent;
}
button{
    outline: none;
}
.navbar-toggle {
    padding: 0;
    margin: 0;
}
@media (min-width: 768px) { 
    .nav-custom a::before,
    .nav-custom a::after {
        display: inline-block;
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
        -moz-transition: -moz-transform 0.3s, opacity 0.2s;
        transition: transform 0.3s, opacity 0.2s;
    }
    .nav-custom a::before {
        margin-right: 10px;
        content: '[';
        -webkit-transform: translateX(20px);
        -moz-transform: translateX(20px);
        transform: translateX(20px);
    }
    .nav-custom a::after {
        margin-left: 10px;
        content: ']';
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        transform: translateX(-20px);
    }
    .nav-custom a:hover::before,
    .nav-custom a:hover::after,
    .nav-custom a:focus::before,
    .nav-custom a:focus::after {
        opacity: 1;
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        transform: translateX(0px);
    }
    .nav-custom a:link, .nav-custom a:visited, .nav-custom a:hover, .nav-custom a:active {
        text-decoration: none;
        color: #fff;
        outline: none;
    }
    .nav-custom.affix a:link, .nav-custom.affix a:visited, .nav-custom.affix a:hover, .nav-custom.affix a:active {
        text-decoration: none;
        color:  #f87f73;
        outline: none;
    }
}
@media (max-width: 767px) {
    .navbar-collapse {
        width: 250px;
        position: fixed;
        right: -250px;
        top: 80px;
        overflow-x: hidden;
        background-color: rgba(255, 255, 255, 0.8);
        border-top: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transition: all .35s ease;
        -o-transition: all .35s ease;
        transition: all .35s ease;
    }
    .navbar-collapse.in {
        right: 0px;
        width: 250px;
        -webkit-transition: all .35s ease;
        -o-transition: all .35s ease;
        transition: all .35s ease;
    }
    .navbar-collapse.collapsing {
        height: auto !important;
    }
    .navbar-nav {
        margin: 0 -15px;
    }
    .navbar-nav>li>a {
        padding: 0;
        line-height: 3em;
        text-align: center;
    }
    .navbar-collapse ul {
        border-left: 1px solid rgba(0, 0, 0, .18);
    }
    .navbar-collapse ul li {
        border-bottom: 1px solid rgba(0, 0, 0, .18);
    }
    .navbar-collapse ul li:hover {
        background-color: #f87f73;
        color: #fff;
        -webkit-transition: all .35s ease;
        -o-transition: all .35s ease;
        transition: all .35s ease;
    }
    .navbar-collapse ul a:link,
    .navbar-collapse ul a:visited {
        color: #f87f73;
    }
    .navbar ul a:hover {
        text-decoration: none;
        color: #fff;
    }
}

      

        
        
        
      

    

How it works:

• The navbar-fixed-top class is used in place of custom styles.
• Instead of writing your own javascript to handle your nav on scrolling, you can use Bootstrap Affix . This built-in javascript plugin can use the data-offset-top attribute to set the point at which the affix class is automatically added to the element where the spy-spy attribute is set. By using data attributes you don't need a single line of javascript, just add styles for how you want your element to look when the class is applied . Now all of your styles are in your CSS, and none of them should be in your javascript. affix
  
  
• Use the built-in navbar-toggle which uses the built-in Bootstrap Collapse plugin to navigate to and from mobile navigation. This eliminates the need to write / test / maintain native javascript and eliminates duplicate markup for the menu. The collapse plugin applies the class to the element with the collapse class when expanding the menu, so you can simply use it to style your menu. in
  
  
• Use media queries to change the menu layout based on the size of the viewport. The "mobile" menu only appears on viewports smaller than 767 pixels, so you can easily target how you want your mobile menu to appear.

Overall, the CSS is almost identical to CSS, I just changed the selector to reflect the changes in the markup. Apart from a few minor tweaks, it was heavily cut and pasted from your site.