Sticky navigation menu on empire theme all the way down

Store Design

Topic summary

A user seeks help making the main navigation menu sticky throughout the entire page scroll on an Empire theme Shopify store. Currently, the menu only remains sticky partway down.

Proposed Solution:
A CSS code snippet is provided to add to theme.css or theme.css.liquid file, targeting .site-header-sticky--scrolled .site-navigation-wrapper with display: block !important and margin-top: 0px !important within a media query for screens wider than 1024px.

Ongoing Issue:
Multiple users report the same problem with this solution: the menu stays sticky when scrolling down, but disappears when scrolling back up.

Potential Fix:
One participant suggests changing margin-top from 0px to 1px, which appears to prevent the menu from disappearing, though the exact reason remains unclear.

Status: The discussion remains open with a workaround identified but not fully understood or confirmed as a complete solution.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m trying to figure out how to keep the main menu sticking all the way down. If you will check my website, it is only keeping the main menu halfway.

Here’s the website’s link.

2

Hi @Wellanie you can do that by adding this CSS code at the bottom of your theme.css or theme.css.liquid file in Online store > Themes > Edit code > Assets

@media only screen and (min-width: 1024px) {
.site-header-sticky--scrolled .site-navigation-wrapper {
display: block !important;
margin-top: 0px !important;
}
}
1 Like
3

your answer was really helpful,

although there is another problem. the menu was kept when scrolled down, but when you try to scroll it back all the way up, it disappears.

4

Hi Wellanie

I’m having the same issue with this solution: “the menu was kept when scrolled down, but when you try to scroll it back all the way up, it disappears.”

It seems to be fixed on your website. Could you share the solution or some tips on how to fix this? Thank you.

5

I also used this solution and had the same issue. Trying things out, I put “1px” in the place of “0px” and it seems to have fixed it. I’m not 100% sure what that did exactly, but it keeps the menu from disappearing.