Non-sticky navigation menu on mobile view (empire theme)

Store Design
, , ,

Topic summary

A user modified the Empire theme to add a sticky navigation menu but encountered an issue: the menu remains sticky on mobile devices, covering the entire screen and obscuring page content.

Proposed Solutions:

  • Use CSS media queries to apply sticky header classes only for desktop widths
  • Add specific code to theme.css that sets the header position to relative for screens with max-width of 800px

Current Status:

  • One responder confirms the fix is working when testing on Android
  • The original poster reports the menu still appears sticky on their device (possibly iOS) and in Shopify admin
  • Potential device/platform-specific behavior difference between iOS and Android remains unresolved

The discussion is ongoing as the proposed CSS solution works for some but not consistently across all devices.

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

Hi,

how can I make it a non-sticky menu for mobile view? Originally, empire theme is non-sticky menu but I added a code to make it otherwise. the downside is it also became non-sticky on mobile view and the page can’t be seen anymore seen it’s covering the whole screen.

Wellanie_0-1689662606961.png
Wellanie_0-1689662606961.png431×577 56 KB

Website’s link.

Thanks!

2

Hello @Wellanie ,

The css you used to make the header sticky with classes ( .site-header-sticky .site-header )
use it with media query in this way sticky menu will work only for desktop only.

Thanks

3

Hello, you can open file theme.css and paste my code at bottom file it will work for you

@media screen and (max-width: 800px){
body .site-header-sticky .site-header {
position: relative;
}
}

Thank you

4

Hi,

Thanks for your reply. I tried to paste the code but the nav menu is still sticky for the mobile view.

5

when I check on your site, I see it’s working and not see sticky, how it not working for you?

6

did you check it using your phone?

7

Yes, I just check on my phone: https://www.aldmarketing.com/

I’m using android

8

I’m not sure why. Is there a difference if I’m using ios? the thing is, also in Shopify admin, the nav menu is still sticky…