Navigation: Navbars

Use navbars to help your users navigate through your pages with ease, and offer consistency across the entire website.

Quick Summary

Creating Navbars: Create a navbar using HTML and CSS, and always use JS to add responsive functionality.

Responsive Navbars: The navbar should switch to a hamburger menu layout when viewed on mobile devices. Accomplish this using media queries to hide the desktop navbar items, and display a hamburger icon which can be clicked to reveal a hidden navmenu. View on Codepen.

Creating Navbars

When creating navbar elements, responsive functionality must be kept in mind, adding media queries to adjust the navbar on different device widths. Create a navbar using HTML and CSS, and use JavaScript to add mobile responsive functionality.

Navbar Variations

Always implement both mobile and desktop variations in Plant Parents products using media queries as shown in the Codepen example.

Navbar: Desktop

To be used on desktop devices via media queries. View on Codepen

Navbar: Mobile

To be used on mobile or tablet devices via media queries. View on Codepen