Navigation is really important part of the theme. In {Theme} we have 3 variations of it. The menu markup also contains search bar.
- Default navigation
- Navbar wide navigation
- Navbar white
- Navbar dark
— 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 62 63 64 65 66 67 68 69 70 71 |
<nav data-height="80" class="navbar navbar-default navbar-desktop navbar--animated navbar-top"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <img src="../assets/images/demo-content/drone/distrupt-logo-dark.png" alt=""> </a> </div> <ul class="navbar-buttons list-unstyled list-inline pull-right"> <li><a href="" class="btn-group btn-group--separated"><span class="btn btn-xs btn-accient btn-separated">Order now</span><span class="btn btn-xs btn-accient btn-separated"><i class="fa fa-shopping-cart"></i></span></a> </li> </ul> <ul role="menu" class="nav navbar-nav ct-navbar--fadeIn"> <li class="nav-item dropdown"><a>Home</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="index3.html">Smartwatch</a> </li> <li class="nav-item"><a href="index.html">Drone</a> </li> <li class="nav-item"><a href="index5.html">Smartphone</a> </li> <li class="nav-item"><a href="index2.html">Beacon</a> </li> <li class="nav-item dropdown-submenu"><a href="index4.html">Vr mask</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="#">Submenu 1</a> </li> <li class="nav-item"><a href="#">Submenu 2</a> </li> <li class="nav-item"><a href="#">Submenu 3</a> </li> <li class="nav-item"><a href="#">Submenu 4</a> </li> </ul> </li> </ul> </li> <li class="nav-item"><a href="#">Features</a> </li> <li class="nav-item"><a href="#">Product</a> </li> <li class="nav-item dropdown"><a>Pages</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="services.html">Services</a> </li> <li class="nav-item"><a href="shop-locator.html">Shop locator</a> </li> <li class="nav-item"><a href="press-kit.html">Press kit</a> </li> <li class="nav-item"><a href="404.html">404 page</a> </li> <li class="nav-item"><a href="faq.html">FAQ</a> </li> <li class="nav-item"><a href="investors.html">Investors</a> </li> <li class="nav-item"><a href="privacy-policy.html">Privacy Policy</a> </li> <li class="nav-item"><a href="terms-conditions.html">Terms & conditions</a> </li> </ul> </li> <li class="nav-item"><a href="about-us.html">About us</a> </li> <li class="nav-item"><a href="contact-us.html">Contact</a> </li> </ul> </div> </div> </div> </nav> |
Screenshots
Default navigation
— Navbar wide 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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<nav data-background="#ffffff" data-height="80" class="navbar navbar-default navbar-fixed navbar-desktop navbar-wide"> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <div class="inner"> <img src="../assets/images/demo-content/drone/distrupt-logo-dark.png" alt=""> </div> </a> <ul class="ct-socials ct-socials--motive list-unstyled list-inline"> <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Facebook"><i class="fa fa-facebook"></i></a> </li> <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Twitter"><i class="fa fa-twitter"></i></a> </li> <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Pinterest"><i class="fa fa-pinterest"></i></a> </li> </ul> <div class="ct-contactBox"><a href="tel:123456789"><span class="ct-contactBox-top">Call us now:</span><span class="ct-contactBox-number">0 123 456 7890</span></a> </div> <div class="ct-iconBox ct-iconBox--small media ct-contactBox--responsive"> <a href="tel:123456789"> <div class="media-left"> <div class="ct-iconBox-icon"><i class="fa fa-phone"></i> </div> </div> </a> </div> <div class="ct-iconBox ct-iconBox--small media"> <a href="shop-locator.html"> <div class="media-left"> <div class="ct-iconBox-icon"><i class="fa fa-map-marker"></i> </div> </div> <div class="media-body"> <h6 class="ct-iconBox-title">Locate <br> our shop</h6> </div> </a> </div> </div> <div class="ct-search-link"><a href="#"><i class="fa fa-search"></i></a> </div> <ul role="menu" class="nav navbar-nav ct-navbar--fadeIn"> <li class="nav-item dropdown"><a>Home</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="index3.html">Smartwatch</a> </li> <li class="nav-item"><a href="index.html">Drone</a> </li> <li class="nav-item"><a href="index5.html">Smartphone</a> </li> <li class="nav-item"><a href="index2.html">Beacon</a> </li> <li class="nav-item dropdown-submenu"><a href="index4.html">Vr mask</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="#">Submenu 1</a> </li> <li class="nav-item"><a href="#">Submenu 2</a> </li> <li class="nav-item"><a href="#">Submenu 3</a> </li> <li class="nav-item"><a href="#">Submenu 4</a> </li> </ul> </li> </ul> </li> <li class="nav-item"><a href="#">Product</a> </li> <li class="nav-item"><a href="#">Experience</a> </li> <li class="nav-item dropdown"><a>Pages</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="services.html">Services</a> </li> <li class="nav-item"><a href="shop-locator.html">Shop locator</a> </li> <li class="nav-item"><a href="press-kit.html">Press kit</a> </li> <li class="nav-item"><a href="404.html">404 page</a> </li> <li class="nav-item"><a href="faq.html">FAQ</a> </li> <li class="nav-item"><a href="investors.html">Investors</a> </li> <li class="nav-item"><a href="privacy-policy.html">Privacy Policy</a> </li> <li class="nav-item"><a href="terms-conditions.html">Terms & conditions</a> </li> </ul> </li> <li class="nav-item"><a href="about-us.html">About us</a> </li> <li class="nav-item"><a href="contact-us.html">Contact</a> </li> <li class="nav-item"><a href="#">Order now</a> </li> </ul> </nav> |
Screenshot
Navbar whide
— Navbar white
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 |
<nav data-height="80" class="navbar navbar-default navbar-light navbar-desktop navbar--animated navbar-top"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <img src="../assets/images/demo-content/smartphone/logo-light.png" alt=""> </a> </div> <ul class="navbar-buttons list-unstyled list-inline pull-right"> <li><a href="" class="btn-group btn-group--separated"><span class="btn btn-xs btn-transparent btn--white btn-separated">Order now</span><span class="btn btn-xs btn-transparent btn--white btn-separated"><i class="fa fa-shopping-cart"></i></span></a> </li> </ul> <ul role="menu" class="nav navbar-nav ct-navbar--fadeIn"> <li class="nav-item dropdown"><a>Home</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="index3.html">Smartwatch</a> </li> <li class="nav-item"><a href="index.html">Drone</a> </li> <li class="nav-item"><a href="index5.html">Smartphone</a> </li> <li class="nav-item"><a href="index2.html">Beacon</a> </li> <li class="nav-item dropdown-submenu"><a href="index4.html">Vr mask</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="#">Submenu 1</a> </li> <li class="nav-item"><a href="#">Submenu 2</a> </li> <li class="nav-item"><a href="#">Submenu 3</a> </li> <li class="nav-item"><a href="#">Submenu 4</a> </li> </ul> </li> </ul> </li> <li class="nav-item"><a href="#">Features</a> </li> <li class="nav-item"><a href="#">Product</a> </li> <li class="nav-item dropdown"><a>Pages</a> <ul role="menu" class="dropdown-menu"> <li class="nav-item"><a href="services.html">Services</a> </li> <li class="nav-item"><a href="shop-locator.html">Shop locator</a> </li> <li class="nav-item"><a href="press-kit.html">Press kit</a> </li> <li class="nav-item"><a href="404.html">404 page</a> </li> <li class="nav-item"><a href="faq.html">FAQ</a> </li> <li class="nav-item"><a href="investors.html">Investors</a> </li> <li class="nav-item"><a href="privacy-policy.html">Privacy Policy</a> </li> <li class="nav-item"><a href="terms-conditions.html">Terms & conditions</a> </li> </ul> </li> <li class="nav-item"><a href="about-us.html">About us</a> </li> <li class="nav-item"><a href="contact-us.html">Contact</a> </li> </ul> </div> </div> </div> </nav> |
Screenshot
Navbar whide
— Navbar dark
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 |
<nav data-height="80" class="navbar navbar-dark navbar-fixed navbar-desktop"> <div class="container"> <div class="row"> <div class="col-sm-4"> <ul class="list-unstyled list-inline ct-socials--rounded"> <li><a href="#"><i class="fa fa-facebook"></i></a> </li> <li><a href="#"><i class="fa fa-twitter"></i></a> </li> <li><a href="#"><i class="fa fa-instagram"></i></a> </li> </ul> </div> <div class="col-sm-4"> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <img src="../assets/images/demo-content/beacon/distrupt-logo-light.png" alt=""> </a> </div> </div> <div class="col-sm-4"> <ul role="menu" class="nav navbar-nav"> <li class="ct-productCart-link"><a href="#"><i class="fa fa-shopping-cart"></i></a> <div class="ct-productCart"> </div> </li> <li class="nav-item-toggle"><a href="#"><i class="fa fa-bars"></i></a> </li> </ul> </div> </div> </div> </nav> |
Screenshot
Navbar dark