NAVIGATION
Navigation is necessary in ensuring that your website is accessible and usable. Good navigation will allow visitors to search your site for longer, giving them confidence in where they are and what they can receive from your website. Navigation allows visitors to search with ease. Hydrogen provides reponsive navigation that you can use in your e-commerce website.
COMPONENT DEMO:
RESPONSIVE NAVIGATION
<!-- RESPONSIVE NAVBAR -->
<nav class="gentle-navbar">
<div class="brand">
<img
src="https://powertrain-ui.netlify.app/assets/favicon.ico"
alt="brand description"
class="brand-icon"
/>
<h6 class="txt-highlight">BRAND</h6>
</div>
<div class="gentle-search-group gentle-navbar-search">
<i class="fas fa-search search-icon"></i>
<input
type="search"
class="gentle-search-bar"
placeholder="Search-for-products"
/>
</div>
<ul class="gentle-nav-links">
<button class="btn nav-icon">
<i class="fas fa-user"></i>
</button>
<div class="badge mx-2">
<i class="fas fa-cart-plus fa-2x"></i>
<div class="badge-number gentle-flex-center">
<span>4</span>
</div>
</div>
</ul>
</nav>
RESPONSIVE NAVIGATION WITH HAMBURGER ON MOBILES
<!-- RESPONSIVE NAVBAR WITH HAMBURGER -->
<nav class="gentle-navbar gentle-responsive-navbar">
<section class="navbar-toggle">
<div class="brand">
<img
src="https://powertrain-ui.netlify.app/assets/favicon.ico"
alt="brand description"
class="brand-icon"
/>
<h6 class="txt-highlight">BRAND</h6>
</div>
<button class="navbar-toggle-btn" id="navbar-hamburger">
<i class="fas fa-bars"></i>
</button>
</section>
<div class="gentle-search-group gentle-navbar-search">
<i class="fas fa-search search-icon"></i>
<input
type="search"
class="gentle-search-bar"
placeholder="Search-for-products"
/>
</div>
<ul class="gentle-nav-links">
<button class="btn nav-icon">
<i class="fas fa-user"></i>
</button>
<div class="badge mx-2">
<i class="fas fa-cart-plus fa-2x"></i>
<div class="badge-number gentle-flex-center">
<span>4</span>
</div>
</div>
</ul>
</nav>
Javascript Code for hamburger navigation:
<script>
const resposiveNavbarToggle = document.querySelector("#navbar-hamburger");
const navbarResponsive = document.querySelector(
".gentle-navbar.gentle-responsive-navbar"
);
resposiveNavbarToggle.addEventListener("click", () => {
navbarResponsive.classList.toggle("active");
});
</script>