Bootstrap 3.0.0 Snippet by jeevan123456

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <nav class="horizontal-nav full-width horizontalNav-notprocessed"> <ul> <li><a href="#">Navigation Item</a></li> <li><a href="#">Work</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
ul{list-style:none;} .horizontal-nav { background: #efefef; border-radius: 6px; } .horizontal-nav ul { background: #128F9A; float: left; text-align: center; border-radius: 6px; border: 1px solid #0e7079; } .horizontal-nav ul li { float: left; border-left: 1px solid #0e7079; } .horizontal-nav ul li:first-child { border-left: 0 none; } .horizontal-nav ul li a { display: block; padding: 10px 20px; color: #fff; border-top: 1px solid rgba(255,255,255, 0.25); border-left: 1px solid rgba(255,255,255, 0.25); } .horizontal-nav ul li:first-child a { border-left: 0 none; } .horizontal-nav ul li a:hover { background: #12808a; } .horizontal-nav ul li:first-child a { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .horizontal-nav ul li:last-child a { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
// When document is ready... $(document).ready(function() { // Call horizontalNav on the navigations wrapping element $('.full-width').horizontalNav({}); });

Related: See More

Questions / Comments: