There are three color variations of navigation menu:
- navbar-default
- navbar-motive
- navbar-inverse
To use each of them you need to add proper class to: <nav class="">...</nav>
Navigation bar
|
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 |
<nav class="navbar navbar-default ct-navbar ct-shadow ct-shadow--type1"> <div class="navbar-header"> <a class="ct-logoDark" href="#"><img src="../assets/images/demo-content/logo.png" alt=""/></a> <a class="ct-logoWhite" href="#"><img src="../assets/images/demo-content/logo2.png" alt=""/></a> </div> <div class="container"> <div class="ct-navbarBox"> <a href="../cars/login.html" class="ct-login"><span>Login</span><i class="fa fa-lock"></i></a> <div class="ct-navbarBox-meta"> <div class="ct-navSearch-box"> <a class="ct-js-navSearch ct-navSearch" href="#"><i class="fa fa-search"></i></a> <div class="ct-navbar-search"> <form role="form"> <div class="form-group ct-input--type2"> <input id="searchM" required="" type="text" name="field[]" placeholder="Search website..." class="form-control"> <label for="searchM"><span>Search</span></label> <button class="ct-navbar-search-button" type="submit"> <i class="fa fa-search fa-fw"></i> </button> </div> </form> </div> </div> <div class="ct-langPicker"> <div class="ct-langPicker-content"> <a href="#"><img src="../assets/images/demo-content/flag-01.jpg" alt=""/></a> <ul class="ct-langPicker-list"> <li><a href="#">English <img src="../assets/images/demo-content/flag-01.jpg" alt=""/></a></li> <li><a href="#">Español <img src="../assets/images/demo-content/flag-03.jpg" alt=""/></a></li> <li><a href="#">Italiano <img src="../assets/images/demo-content/flag-02.jpg" alt=""/></a></li> </ul> </div> </div> </div> <button type="button" 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> </div> <ul class="nav navbar-nav ct-navbar--fadeIn"> <li class="dropdown"><a href="box-icons.html"><div class="ct-textEffect"><span data-content="Boxes">Boxes</span></div></a> <ul class="dropdown-menu"> <li><a href="box-icons.html"><span>Icon Boxes</span></a></li> ... </ul> </li> </ul> </div> </nav> |