Navigational Bar
A navbar is a fundamental element of web design, found at the top of a webpage. It offers easy access to various sections or pages of a website. On desktop, all navigation options are visible, while on mobile, menus are accessed through a hamburger icon for efficient use of space. Navbars streamline user experience by organizing content and guiding users to find what they need quickly.
Illustration of a Navbar Implementation
HTML Code
<header class="c-top-nav-wrapper u-primary-bgcolor">
<div class="c-top-nav l-flex-wrapper">
<div class="c-top-nav__logo l-mt-2 l-mb-1">
<a href="index.html">
<img class="c-top-nav__logo-img" src="images/outback-nursery-logo.png" alt="Outback Nursery & Garden Centre logo">
</a>
</div>
<input type="checkbox" id="toggle-side-menu" class="c-top-nav__mobile-toggle is-mobile-hidden">
<label for="toggle-side-menu" class="c-top-nav__mobile-toggle-icon is-desktop-hidden">
<span class="c-top-nav__mobile-toggle-icon c-top-nav__mobile-toggle-icon--transform"></span>
</label>
<nav class="c-top-nav__menu">
<ul class="c-top-nav__links is-mobile-hidden is-desktop-visible l-flex l-flex-row l-flex-row">
<li class="c-top-nav__link-items"><a class="c-top-nav__link-items--hover c-top-nav__link-items--active u-navlinks" href="coming-soon.html">Our Offerings</a></li>
<li class="c-top-nav__link-items"><a class="c-top-nav__link-items--hover c-top-nav__link-items--active u-navlinks" href="coming-soon.html">Green Tips</a></li>
<li class="c-top-nav__link-items"><a class="c-top-nav__link-items--hover c-top-nav__link-items--active u-navlinks" href="coming-soon.html">Our Journey</a></li>
<li class="c-top-nav__link-items"><a class="c-top-nav__link-items--button u-body u-primary-cta-bgcolor u-primary-cta-font l-p-1" href="coming-soon.html">Chat with us</a></li>
</ul>
</nav>
</div>
</header>