Mega menu not appearing on collection page

Topic summary

A Shopify store owner wants their mega menu to display consistently across all pages (collection pages, product pages, etc.), not just the homepage. Currently, the mega menu only appears on the homepage.

Issue: The mega menu is visible on the homepage but disappears when navigating to collection pages and other site sections.

Solution Provided:

  • Navigate to: Online Store → Themes → Actions → Edit Code → base.css
  • Add the following CSS at the end of the file:
.header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
top: 17rem !important;
}

The solution adjusts the header positioning to make the mega menu visible site-wide. A screenshot demonstrates the expected result after implementing the code.

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

May someone please help me have the mega menu appear on the collection page similar to what’s on my homepage. My site is www.shoplile.com.

Homepage:

I’d like the megamenu to appear on all collection pages and when on other pages on the site. So everywhere a vistor clicks they can see the mega menu.

Thanks in advance :slightly_smiling_face:

Hi @Tellmemore112 ,

Can you share your store URL so that I can check?

https://www.shoplile.com/

Thank you!

Hello @Tellmemore112
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
top: 17rem !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks