NAVIGATION
Documentation and examples for WALDO’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Desktop Navigation
Navbars come with built-in support for a handful of sub-components. Choose from the following such as brand, search, categories option, collapse bar, etc,. You can copy html part from below code snippet.
Code Example
<div class="navigation-content">
<a href="#"><h1 class="navigation-title">WALDO Store</h1></a>
<div class="navigation-container-search">
<select>
<option value="">All Category</option>
<option value="">Fuel</option>
<option value="">Engines</option>
<option value="">Fins</option>
</select>
<input type="search" placeholder="Search for an item..." id="search">
<a href=""><i class="fa fa-search"></i></a>
</div>
<nav class="navigation-list">
<li><a href="#"><i class="fas fa-rocket"></i></a>
<p>Store</p>
</li>
<li>
<div class="badge num-notification">
<a href="#"><i class="fa fa-bell"></i></a>
</div>
<p>Wishlist</p>
</li>
<li>
<div class="badge num-cart">
<a href="#"><i class="fa fa-shopping-cart"></i></a>
</div></i></a>
<p>Cart</p>
</li>
<li><div class="dropdown">
<button class="dropbtn">Account
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Sign Up</a>
<a href="#">Sign In</a>
<a href="#">Log Out</a>
</div>
</div>
</li>
</nav>
</div>