🎯 Improving the Navigation Experience: Hiding the Menu on Scroll
| Before | After |
 |
 |
As part of our ongoing effort to improve usability and streamline the browsing experience, we’ve made a subtle—but powerful—change to our website’s header navigation.
🧠 The Problem
Previously, our navigation menu remained fixed at the top of the screen—even when scrolling. While this keeps links accessible, it can also take up valuable screen space, especially on mobile or when users are deeply browsing.
✅ The Goal
We wanted to keep our logo, search bar, login, and cart accessible, but hide the main navigation menu on scroll to reduce clutter and let users focus on content.
🔧 What We Changed
Here’s a quick summary of the updates:
-
Isolated
<main-menu>so it can be hidden independently of the rest of the header. -
Made
<main-menu>sticky and animated, so it gracefully slides out of view on scroll down, and reappears when scrolling up. -
Cleaned up background styles to avoid leftover spacing or visible white bars when the menu hides.
-
Preserved essential elements like the logo and cart in view at all times.
🚧 Still a Work in Progress
We’re currently working on optimizing this experience for mobile devices. While it functions well on desktop, the mobile version is still in progress. Please bare with us.
💬 Help Us Improve
If you run into any issues or have feedback while using the new layout, especially on mobile, please let us know! This is a working prototype, and your input is valuable to make it even better.
issues you might see.
We have now removed the white bar stili viewable on scroll.
We have fixed the hoover option
this will be fixed on the mobile update.
