Navigation is really important part of the theme. In {Theme} we have 2 variations of it. The menu markup also contains search bar.
- Default Navigation (on scroll Fixed Navigation)
- With Topbar
— Default Navigation (on scroll Fixed 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 class="ct-nav"> <div class="navbar navbar-default navbar-fixed text-center"> <div class="navbar-header"><a href="index.html" class="navbar-brand navbar-panel"><img src="assets/images/demo-content/logo.png" alt="" class="ct-img"><img src="assets/images/demo-content/logo-dark.png" alt="" class="ct-img-show"></a><a href="tel:08001234567" class="navbar-panel"> <span class="ct-tel">0 800 123 4567</span><i class="fa fa-phone ct-tel-icon"></i></a> <ul class="ct-socials list-inline list-unstyled navbar-panel"> <li class="ct-socials__itemfacebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li class="ct-socials__itemtwitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li> <li class="ct-socials__iteminstagram"><a href="#"><i class="fa fa-instagram"></i></a></li> </ul> </div> <div class="ct-search ct-js-search"> <div class="ct-search-icon"><i class="fa fa-search"></i></div> <form> <input type="text" class="form-control"> </form> </div> <ul class="nav navbar-nav navbar-right navbar-fw"> <li class="dropdown dropdown-fw"><a href="index.html">Home</a> <ul class="dropdown-menu"> <li><a href="coach.html">coach</a> </li> <li><a href="speaker.html">speaker</a> </li> <li><a href="training.html">training</a> </li> <li><a href="online-content.html">online content</a> </li> <li><a href="coming-soon.html">coming soon</a> </li> <li><a href="index.html">corporate</a> </li> </ul> </li> <li><a href="about.html">About me</a> </li> <li><a href="services.html">services</a> </li> <li><a>case study</a> </li> <li><a href="pricing.html">pricing</a> </li> <li><a href="testimonials.html">testimonials</a> </li> <li class="dropdown dropdown-fw"><a>pages</a> <ul class="dropdown-menu"> <li><a href="about-us.html">about us</a> </li> <li><a href="team.html">team</a> </li> <li><a href="blog-single.html">blog single</a> </li> <li><a href="contact-us.html">contact us</a> </li> <li><a href="faq.html">faq</a> </li> <li><a href="job.html">job</a> </li> <li><a href="portfolio.html">portfolio</a> </li> <li><a href="portfolio-single.html">portfolio single</a> </li> <li><a href="services-extended.html">services extended</a> </li> </ul> </li> <li><a href="blog.html">blog</a> </li> <li><a href="contact.html">contact me</a> </li> </ul> </div> </nav> |
Screenshots
Navigation – Default
Navigation – Fixed
— With Topbar
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 |
<nav class="ct-nav"> <div class="navbar navbar-default navbar-fixed text-center ct-navbar-style2"> <div class="ct-topbar"> <div class="container"> <ul class="list-unstyled list-inline ct-topbar-contact"> <li><a href="tel:08001234567"><i class="fa fa-phone"></i>0 800 123 4567</a></li> <li><a href="mailto:example@example.com"><i class="fa fa-envelope-o"></i>example@example.com</a></li> </ul> <ul class="list-unstyled list-inline ct-topbar-user-panel"> <li><a data-toggle="modal" data-target="#modal_login"><i class="fa fa-power-off"></i>login</a></li> <li><a data-toggle="modal" data-target="#modal_register"><i class="fa fa-plus"></i>register</a></li> </ul> <div class="clearfix"></div> </div> </div> <div class="container"> <div class="navbar-header"><a href="index.html" class="navbar-brand navbar-panel"><img src="assets/images/demo-content/logo-dark.png" alt=""></a></div> <div class="ct-search ct-search-simple ct-js-search"> <div class="ct-search-icon"><i class="fa fa-search"></i></div> <form class="form-group"> <input type="text" class="form-control"> </form> </div> <ul class="nav navbar-nav navbar-right navbar-fw"> <li class="dropdown"><a href="index.html">Home</a> <ul class="dropdown-menu"> <li><a href="coach.html">coach</a> </li> <li><a href="speaker.html">speaker</a> </li> <li><a href="training.html">training</a> </li> <li><a href="online-content.html">online content</a> </li> <li><a href="coming-soon.html">coming soon</a> </li> <li><a href="index.html">corporate</a> </li> </ul> </li> <li><a href="about.html">About me</a> </li> <li><a href="services.html">services</a> </li> <li><a href="portfolio.html">case study</a> </li> <li><a href="pricing.html">pricing</a> </li> <li><a href="testimonials.html">testimonials</a> </li> <li class="dropdown dropdown-fw"><a>pages</a> <ul class="dropdown-menu"> <li><a href="about-us.html">about us</a> </li> <li><a href="team.html">team</a> </li> <li><a href="contact-us.html">contact us</a> </li> <li><a href="faq.html">faq</a> </li> <li><a href="job.html">job</a> </li> <li><a href="portfolio.html">portfolio</a> </li> <li><a href="portfolio2.html">portfolio2</a> </li> <li><a href="portfolio-single.html">portfolio single</a> </li> <li><a href="services-extended.html">services extended</a> </li> </ul> </li> <li class="dropdown"><a href="blog.html">blog</a> <ul class="dropdown-menu"> <li><a href="blog.html">blog listing</a> </li> <li><a href="blog-single.html">blog single post</a> </li> </ul> </li> <li><a href="contact.html">contact me</a> </li> </ul> </div> </div> </nav> |
Screenshot
Navigation – With Topbar