<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">WEBSITE NAME</a> </div> <!-- Collection of nav links, forms, and other content for toggling --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">HOME</a></li> <li><a href="#">CATALOG</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">EVENTS</a></li> <li><a href="#">PORTFOLIO</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">MESSAGES <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Inbox</a></li> <li><a href="#">Drafts</a></li> <li><a href="#">Sent Items</a></li> <li class="divider"></li> <li><a href="#">Trash</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">CATEGORIES<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">News</a></li> <li><a href="#">Entertainment</a></li> <li><a href="#">Videos</a></li> <li class="divider"></li> <li><a href="#">Upload</a></li> </ul> </li> </ul> </div> </nav> </div> </body> </html>

@import url('https://fonts.googleapis.com/css?family=Montserrat'); .navbar-default { background-color: #12181B; border-top: 4px solid #318B98; border-radius: 0px; } .navbar-default .navbar-nav>li>a { color: #fff; font-weight: 500; font-family: 'Montserrat', sans-serif; font-size: medium; } .navbar-default .navbar-nav>.active>a{ background-color: #318B98; color: #fff; font-weight: 500; font-family: 'Montserrat', sans-serif; font-size: medium; } .navbar-default .navbar-brand { color: #fff; background-color: #1DAA75; font-family: 'Montserrat', sans-serif; } .navbar-default .navbar-nav .open .dropdown-menu>li>a { color: #fff; font-family: 'Montserrat', sans-serif; font-size: medium; } .dropdown-menu { background-color: #318B98; }