Boostrap Navbar Example

  1. Include jQuery
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
  2. Include boostrap
    http://getbootstrap.com/getting-started/#download

HTML Example:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	  </button>
	  <a class="navbar-brand" href="#">RIMBI</a>
	</div>
	<div id="navbar" class="collapse navbar-collapse">
	  <ul class="nav navbar-nav">
		<!--li class="active"><a href="#">Home</a></li-->
		<li><a href="#about">85%覆膜酵母</a></li>
		<li><a href="#contact">堅持把簡單的事做到最好</a></li>
		<li><a href="#contact">專業醫美醫師的建議</a></li>
		<li><a href="#contact">FB社團連三高</a></li>
		<li><a href="#contact">時尚美妝部落客強力推薦</a></li>
		<li><a href="#contact">萬名網友見證</a></li>
		<li><a href="#contact">韓妞蛋白肌的秘密</a></li>
		<li><a href="#contact">超值優惠</a></li>
	  </ul>
	</div><!--/.nav-collapse -->
  </div>
</nav>

Keep navbar as collapsed for all screen sizes.

@media (max-width: 2000px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

Reference:
http://stackoverflow.com/questions/22462142/how-to-keep-bootstrap-3-navbar-as-collapsed-for-all-screen-sizes

Customization:

//Nav
$nav-blue: #00AFCC;
$nav-dark-blue: #00A9C5;
.navbar-inverse{
	background-image: linear-gradient(to bottom,$nav-blue 0,$nav-blue 100%);
	background-color: $nav-dark-blue;
    border-color: $nav-dark-blue;
	.container{
		padding-right: 15px;
    	padding-left: 15px;
    	.navbar-toggle{
    		border-color: #FFF;
    		&:focus, &:hover{
    			background-color: $blue;
    		}
    	}
    	.navbar-brand{
    		color: #FFF;
    	}
    	.navbar-collapse, .navbar-form{
    		border-color: #FFF;
    	}
    	.navbar-nav>li>a{
    		color: #FFF;
    	}
    	.navbar-nav>.active>a, .navbar-nav>.open>a{
    		background-image: linear-gradient(to bottom,$nav-blue 0,$nav-blue 100%);
    	}
	}
}