Navigation is really important part of the theme. In {Theme} we have one version of the navigation bar. The menu markup also contains search bar.
- Default Navigation
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 |
<nav class="navbar ct-u-backgroundLightGray hidden-xs"> <div class="container ct-navbar-container"> <div class="row"> <ul class="navbar-left ct-u-paddingBoth20 col-lg-9"> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>About us</span><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="about-us.html">Who we are</a></li> <li><a href="history.html">Our history</a></li> <li><a href="team.html">Meet the team</a></li> <li><a href="reviews.html">Reviews</a></li> <li><a href="careers.html">Careers</a></li> </ul> </li> <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>Services</span><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="services_overview.html">Services overview</a></li> <li><a href="preventive_maintenance.html">Preventive Maintenance</a></li> <li><a href="oil_change.html">Oil Change</a></li> <li><a href="tires.html">Tires & Tire Repair</a></li> <li><a href="brakes.html">Brakes & Brake Repair</a></li> <li><a href="mufflers.html">Mufflers & Exhaust</a></li> <li><a href="steering.html">Steering & Suspension</a></li> <li><a href="batteries.html">Batteries, Starters & Charging</a></li> <li><a href="climate.html">Climate Control</a></li> <li><a href="belts.html">Belts & Hoses</a></li> <li><a href="engine.html">Engine Cooling</a></li> <li><a href="check_engine.html">Check Engine Light</a></li> <li><a href="lights.html">Lights, Wipers & Accessories</a></li> </ul> </li> <li><a href="appointments.html"><span>Appointments</span></a></li> <li><a href="coupons.html"><span>Coupons</span></a></li> <li><a href="faq.html"><span>Faq</span></a></li> <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>Blog</span><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="blog.html">Blog</a></li> <li><a href="blog-post.html">Single post</a></li> </ul> </li> <li><a href="contact.html"><span>Contact us</span></a></li> </ul> <button class="btn-search ct-tablet-searcher"><i class="fa fa-search"></i></button> <div class="col-lg-3 ct-parent ct-desktop-searcher"> <div class="ct-navSearcher ct-child" style="width: 491px;"> <form class="navbar-form navbar-form--default pull-left" role="search"> <div class="form-group"> <button class="btn-search"><i class="fa fa-search"></i></button> <input type="text" class="form-control empty ct-u-backgroundDarkGray" id="iconified" placeholder="Search"> </div> </form> </div> </div> </div> </div> </nav> |
Screenshots
Default navigation