<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <nav class="navbar navbar-default"> <div class="container"> <div class="row"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Blog</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </div>

*{border-radius:0px!important; -moz-border-radius:0px!important; -webkit-border-radius:0px!important; border:none!important } /*Override BS*/ .navbar-nav > li { padding-top: 0px!important; padding-bottom: 0px!important; } .navbar-default .navbar-nav > li > a {padding-left:40px; padding-right: 40px} .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{padding-top:30px!important;padding-bottom:40px} body{background:#16A085} /*Main CSS*/ #particles{height:500px} .navbar-default { background-color: #026c71; border-color: none; } .navbar-nav > li{padding-top:30px; padding-bottom:30px} .navbar-nav { display: table; float: none; margin: 0 auto; table-layout: fixed; } .navbar-nav > li:after { content: " •"; color: #fff; float: right; display: block; z-index: 999; position: relative; font-size: 20px; margin-top: -63px; margin-right: -4px; } .navbar-nav > li:last-child:after{content:"";} @media (max-width: 767px) { .navbar-nav > li:after{content: ""!important} }