How to make dropdown menu full width on hover?

Store Design

Topic summary

Goal: make a Shopify mega menu dropdown span full width on hover, then center its items; later ask about adding an image.

What was done

  • A helper provided a CSS-based approach inserted in Online store > Themes > Edit code > Layout > theme.liquid before .
  • Core CSS (as shown by OP) set the submenu to full width: .list-menu li ul.header__submenu { position: fixed; left: 0; width: 100%; } so the dropdown stretches across the viewport.
  • OP then asked to center submenu text. Their first attempt using justify-content: center didn’t work; the helper supplied a revised CSS snippet (content not fully visible in the thread) that successfully centered the items.
  • Adding images to the mega menu was noted as more complex and to be handled in a separate thread.

Status/outcomes

  • OP confirmed full-width hover and centered text are working.
  • No implementation for images yet.

Recent update / open issue

  • Another user (Theme: Gem) tried applying the same head-injected CSS in theme.liquid but it didn’t work for them. They shared part of their markup and requested guidance. Likely theme-specific selectors/structure differ, so this remains unresolved for that theme.

Notes

  • Screenshots illustrate before/after appearance. Code snippets are central to the solution.
Summarized with AI on December 31. AI used: gpt-5.
1

Hello Everyone,

Here is how the dropdown from my mega menu currently looks:

Screenshot 2024-04-10 at 16.52.14.png
Screenshot 2024-04-10 at 16.52.14.png3446×1456 476 KB

I would like to change it to full width as in here:

Screenshot 2024-04-10 at 16.53.23.png
Screenshot 2024-04-10 at 16.53.23.png3448×1086 223 KB

Is there any way to do so?

Any response is highly appreciated.

2

@jonela Please provide website url.

3

Hello Hardik2903,

Here is the url: https://352124.myshopify.com/

Password: dewhin

Thank you very much,

Jonela

4

Please go to

  1. Online store
  2. Themes → Edit theme
  3. Layout
  4. theme.liquid and paste this code before

If my solution works, then please accept it as a solution.

5

It works now, thank you!!!

Screenshot 2024-04-11 at 15.29.06.png
Screenshot 2024-04-11 at 15.29.06.png3450×1640 413 KB

Is there a way to center the text rather than aligning to the left? Also, would you know how to add an image (possibly the image for the highlighted collection) next to the text?

Thanks a million!

6

I have provided code to move the menus to center. However, adding images to the Mega Menu is a bit complicated process which can take some time for coding.

Please go to

  1. Online store
  2. Themes → Edit theme
  3. Layout
  4. theme.liquid and paste this code before

If my solution works, then please accept it as a solution.

7

Hello,

I’ve added the code like this:

.list-menu li ul.header__submenu { position: fixed; left: 0; width: 100%; } .list-menu li ul.header__submenu li.header__submenu a { justify-content: center; }

Unfortunately, it did not work.

8

Please replace my second code with this one.
9

Thank you, this worked. I will start another thread for adding an image.

1 Like
10

Hi, I’m having the same issue. I applied the same code as above but it didn’t work. Would you mind letting me know where I’ve gone wrong. We require exactly the same thing as the original poster. Full width on hovering on collection.

Theme is Gem. Code on theme.liquid.

Top half of the code looks like this.

{%- if settings.favicon != blank -%}

{%- endif -%}

{%- render ‘seo-title’ -%}

{%- if page_description -%}

{%- endif -%}

{%- render ‘social-meta-tags’ -%}

Any help would be appreciated! - I hope OP doesn’t mind. Only question I have seen which matches exactly what I need.

Thanks :slightly_smiling_face: