Why does the top menu disappear in Empire Theme when scrolling down?

Topic summary

Issue: The Empire Theme’s top navigation menu disappears when scrolling down pages, which users want to prevent.

Solution Provided: Add CSS code to the theme.css (or theme.css.liquid) file:

  • Navigate to: Online Store → Theme → Edit code → assets → theme.css
  • Insert:
.site-navigation-wrapper {
  display: block !important;
  margin-top: 0 !important;
}

Status: The fix successfully stops the menu from disappearing on desktop. However, one user reports it creates display issues on mobile devices and causes brief flickering on desktop during page load. A request remains open for a desktop-only solution that avoids these mobile compatibility problems.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.

Can anyone tell me how to stop the top menu in the Empire Theme from vanishing when you scroll down a page. It’s 100% a feature, but this feature makes no sense to me so I’d like to fix it.

http://www.darkhorseworkshop.com/

Hi @DarkHorse

I`am Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendation.

Add this css at the bottom

Online Store->Theme->Edit code

assets->theme.css

.site-navigation-wrapper {

display: block !important;

margin-top: 0 !important;

}

Best Regards

Richard-pagefly

Thanks that did the trick!

This one still works, thanks!!

I added it on my

Online Store->Theme->Edit code

assets->theme.css.liquid

This works for the desktop version but it looks terrible on mobile. Is there a way to make it sticky for desktop only? Also, as it currently is it does briefly disappear on desktop, presumably reading the original theme code, and then displays entirely.