HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<nav class="ct-menu"> <div class="navbar navbar-fixed text-center navbar-default"> <div class="container-fluid"> <form class="ct-search form-group"> <input id="navbar-search" placeholder="Search..." required="required" name="field[]" class="form-control" /> <label for="navbar-search" class="sr-only">Search...</label> <button type="submit"><i class="fa fa-search"></i> </button> </form> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <img src="assets/images/demo-content/page-logo.png" alt="Sporta Logo"> </a> </div> <ul class="ct-socials list-inline list-unstyled pull-left"> <li class="ct-socials__item--facebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a> </li> <li class="ct-socials__item--twitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a> </li> <li class="ct-socials__item--instagram"><a href="#"><i class="fa fa-instagram"></i></a> </li> <li class="ct-socials__item--linkedin"><a href="#"><i class="fa fa-linkedin"></i></a> </li> </ul> <ul class="ct-menu-icons pull-right"> <li class="ct-search-toggle"><a href="#" class="ct-icon"><i class="fa fa-search"></i></a> </li> <li class="ct-wishlist-dropdown"> <a href="#" class="ct-icon"> <div class="ct-wishlist-number">0</div><i class="fa fa-heart-o"></i> </a> <div class="ct-wishlist"></div> </li> <li class="ct-cart-dropdown"> <a href="#" class="ct-icon"> <div class="ct-cart-number"></div><i class="fa fa-shopping-cart"></i><i class="fa fa-cart-arrow-down"></i> </a> <div class="ct-cart"></div> </li> <li class="ct-mobile-toggle"><a href="#" class="ct-icon"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li role="presentation" class="dropdown nav-item"><a data-toggle="dropdown" href="index.html" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">Home<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="index.html">Home</a> </li> <li><a href="index-shop.html">Shop</a> </li> <li><a href="index-parallax.html">Parallax</a> </li> </ul> </li> <li class="nav-item"><a href="about-us.html">About Us</a> </li> <li class="nav-item"><a href="services.html">Services</a> </li> <li role="presentation" class="dropdown nav-item"><a data-toggle="dropdown" href="sample-page.html" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">Pages<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="sample-page.html">Sample Page</a> </li> <li><a href="sample-left-sidebar.html">Left Sidebar</a> </li> <li><a href="sample-right-sidebar.html">Right Sidebar</a> </li> </ul> </li> <li class="nav-item"><a href="#">Features</a> </li> <li role="presentation" class="dropdown nav-item"><a data-toggle="dropdown" href="blog.html" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">Blog<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="blog.html">Blog</a> </li> <li><a href="blog-single.html">Single Post</a> </li> </ul> </li> <li class="nav-item"><a href="#">Shop</a> </li> <li class="nav-item"><a href="contact.html">Contact Us</a> </li> </ul> </div> </div> </nav> |
If you do not want a fixed navbar, remove class navbar-fixed
Screenshots
Navbar