Navigation

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
Sticky Navigation (activate on scroll)

HTML markup

<nav class="ct-menu">
  <div class="topbar">
    <div class="topbar__inner">
      <address class="ct-address ct-footer__address topbar__address"><a href="https://goo.gl/maps/obRcgtwGH5K2" class="media ct-address__box" target="_blank">
          <div class="media-left"><i class="fa fa-map-marker"></i></div>
          <div class="media-body"><span class="media-heading">9870 St Vincent Place, Glasgow, DC 45 Fr 45.</span></div></a><a href="mailto:contact@myconfetti.com" class="media ct-address__box">
          <div class="media-left"><i class="fa fa-envelope"></i></div>
          <div class="media-body"><span class="media-heading">contact@myconfetti.com</span></div></a><a href="tel:0123456789" class="media ct-address__box">
          <div class="media-left"><i class="fa fa-phone"></i></div>
          <div class="media-body"><span class="media-heading">(012) 345-6789</span></div></a>
      </address>
    </div>
    <div class="topbar__inner">
      <ul class="ct-socials list-inline list-unstyled">
        <li class="ct-socials__item ct-socials__item--facebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li>
        <li class="ct-socials__item ct-socials__item--twitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li>
        <li class="ct-socials__item ct-socials__item--flickr"><a href="#"><i class="fa fa-flickr"></i></a></li>
      </ul>
    </div>
  </div>
  <div class="midbar">
    <div class="midbar__inner">
      <ul class="midbar-nav list-inline">
        <li class="nav-item"><a href="event-picnics.html">Picnics</a>
        </li>
        <li class="nav-item"><a href="event-church.html">Church Events</a>
        </li>
        <li class="nav-item"><a href="event-neighborhood.html">Neighborhood Parties</a>
        </li>
        <li class="nav-item"><a href="event-sports-teams.html">Sports Teams</a>
        </li>
        <li class="nav-item"><a href="event-adult.html">Fundraisers</a>
        </li>
        <li class="nav-item"><a href="event-schools.html">Schools</a>
        </li>
        <li class="nav-item"><a href="event-special.html">Special Events</a>
        </li>
        <li class="nav-item"><a href="event-birthday.html">Birthday Parties</a>
        </li>
      </ul>
    </div>
    <div class="midbar__inner"><a href="#" class="midbar__search-toggle"><i class="fa fa-search"></i></a></div>
    <div class="midbar__search midbar__search--default">
      <form class="ct-search form-group">
        <input id="midbar-search" placeholder="Search..." required="required" class="form-control"/>
        <label for="midbar-search" class="sr-only">Search...</label>
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>
  </div>
  <div class="navbar navbar-default">
    <div class="navbar-header"><a href="index.html" class="navbar-brand"><img src="assets/images/demo-content/logo.png" alt="logo"></a></div><a href="#" class="btn btn-motive pull-right">Book Now</a>
    <ul class="nav navbar-nav navbar-right">
      <li class="nav-item"><a href="index.html">Home</a>
      </li>
      <li role="presentation" class="dropdown nav-item nav-item"><a href="about.html" class="dropdown-toggle">Pages<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="about.html">About Us</a>
          </li>
          <li><a href="testimonials.html">Testimonials</a>
          </li>
          <li><a href="book-party.html">Book Party</a>
          </li>
          <li><a href="faq.html">Faq</a>
          </li>
          <li><a href="coming-soon.html">Coming Soon</a>
          </li>
          <li role="presentation" class="submenu"><a href="#" class="submenu-toggle">Submenu<i class="fa fa-caret-right"></i></a>
            <ul class="dropdown-menu">
              <li><a href="#">Submenu-1</a>
              </li>
              <li><a href="#">Submenu-2</a>
              </li>
              <li><a href="#">Submenu-3</a>
              </li>
              <li><a href="#">Submenu-4 </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="nav-item"><a href="gallery.html">Portfolio</a>
      </li>
      <li role="presentation" class="dropdown nav-item nav-item"><a href="packages.html" class="dropdown-toggle">Packages<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="package-detail-1.html">Coloring Party With Clowns</a>
          </li>
          <li><a href="package-detail-2.html">Tutus &amp; Twinkle Toes</a>
          </li>
          <li><a href="package-detail-3.html">Cooking In The Backyard</a>
          </li>
          <li><a href="package-detail-4.html">Barnyard Bash With Toddlers</a>
          </li>
          <li><a href="package-detail-5.html">Cooking In The Backyard</a>
          </li>
          <li><a href="package-detail-6.html">Getting Ready For Indian Party</a>
          </li>
        </ul>
      </li>
      <li role="presentation" class="dropdown nav-item nav-item"><a href="blog.html" class="dropdown-toggle">Blog<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="blog.html">Page 1</a>
          </li>
          <li><a href="blog2.html">Page 2</a>
          </li>
        </ul>
      </li>
      <li class="nav-item"><a href="contact-us.html">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

100

101

102

103

104

105

106

107

108

109

110

111

112

<div class="media-body"><span class="media-heading">9870 St Vincent Place, Glasgow, DC 45 Fr 45.</span></div></a><a href="mailto:contact@myconfetti.com" class="media ct-address__box">

<div class="media-body"><span class="media-heading">contact@myconfetti.com</span></div></a><a href="tel:0123456789" class="media ct-address__box">

</address>

</div>

</ul>

</div>

<li class="nav-item"><a href="event-picnics.html">Picnics</a>

</li>

<li class="nav-item"><a href="event-church.html">Church Events</a>

</li>

<li class="nav-item"><a href="event-neighborhood.html">Neighborhood Parties</a>

</li>

<li class="nav-item"><a href="event-sports-teams.html">Sports Teams</a>

</li>

<li class="nav-item"><a href="event-adult.html">Fundraisers</a>

</li>

<li class="nav-item"><a href="event-schools.html">Schools</a>

</li>

<li class="nav-item"><a href="event-special.html">Special Events</a>

</li>

<li class="nav-item"><a href="event-birthday.html">Birthday Parties</a>

</li>

</ul>

</div>

<label for="midbar-search" class="sr-only">Search...</label>

</form>

</div>

</li>

<li role="presentation" class="dropdown nav-item nav-item"><a href="about.html" class="dropdown-toggle">Pages<span class="caret"></span></a>

<li><a href="about.html">About Us</a>

</li>

<li><a href="testimonials.html">Testimonials</a>

</li>

<li><a href="book-party.html">Book Party</a>

</li>

</li>

<li><a href="coming-soon.html">Coming Soon</a>

</li>

<li role="presentation" class="submenu"><a href="#" class="submenu-toggle">Submenu<i class="fa fa-caret-right"></i></a>

<li><a href="#">Submenu-1</a>

</li>

<li><a href="#">Submenu-2</a>

</li>

<li><a href="#">Submenu-3</a>

</li>

<li><a href="#">Submenu-4 </a>

</li>

</ul>

</li>

</ul>

</li>

<li class="nav-item"><a href="gallery.html">Portfolio</a>

</li>

<li role="presentation" class="dropdown nav-item nav-item"><a href="packages.html" class="dropdown-toggle">Packages<span class="caret"></span></a>

<li><a href="package-detail-1.html">Coloring Party With Clowns</a>

</li>

<li><a href="package-detail-2.html">Tutus & Twinkle Toes</a>

</li>

<li><a href="package-detail-3.html">Cooking In The Backyard</a>

</li>

<li><a href="package-detail-4.html">Barnyard Bash With Toddlers</a>

</li>

<li><a href="package-detail-5.html">Cooking In The Backyard</a>

</li>

<li><a href="package-detail-6.html">Getting Ready For Indian Party</a>

</li>

</ul>

</li>

</li>

</li>

</ul>

</li>

<li class="nav-item"><a href="contact-us.html">Contact Us</a>

</li>

</ul>

</div>

</nav>

Screenshots

Default Navigation

Fixed Navigation (activate on scroll)

Needed class:
.midbar__search–default

Navbar Search Default

Needed class:
.midbar__search–transparent

Navbar Search Transparent

JavaScript

You will find this code inside main.js file.

    /* Midbar Search */
    $('.midbar__search-toggle').on('click', function(e) {
      var input, midbar;
      e.preventDefault();
      midbar = $('.midbar');
      input = $('.midbar__search input');
      if (midbar.hasClass('search-open')) {
        midbar.removeClass('search-open');
      } else {
        midbar.addClass('search-open');
      }
      input.focus();
      return false;
    });

/* Midbar Search */

$('.midbar__search-toggle').on('click', function(e) {

var input, midbar;

e.preventDefault();

midbar = $('.midbar');

input = $('.midbar__search input');

if (midbar.hasClass('search-open')) {

midbar.removeClass('search-open');

} else {

midbar.addClass('search-open');

}

input.focus();

return false;

});

News

Siver

Estato

Disrupt

We are elite