Dawn Theme: Mega Menu Dropdown List Alignment

Store Design
, , ,

Topic summary

A user is seeking CSS code to properly align mega menu dropdown lists in the Dawn theme. Currently, the dropdown menus appear centered rather than positioned directly below their corresponding parent menu tabs.

Specific Issue:

  • The “Ring” menu dropdown should align beneath the “Ring” tab itself
  • Same alignment problem affects other menu items
  • User provided a screenshot demonstrating the misalignment

Attempted Solutions:

  • One suggestion involved modifying base.css with positioning properties (position: absolute; top: 100%; left: 0;) for .site-nav__dropdown - this did not resolve the issue
  • Another approach targeted #Details-HeaderMenu-2 ul > li with width: 100% !important - also unsuccessful as it centered rather than left-aligned the dropdowns

Current Status:

  • The discussion remains open with no working solution yet
  • User shared their store preview URL for direct troubleshooting
  • Multiple contributors are attempting to provide CSS fixes
Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi!

Can anyone share some code on how to align the sub-menu list below its corresponding menu on Dawn Theme? As for this image below, it should be under the “Ring” menu (the same goes for the others).

Thank you in advance for your help.

mega menu.png
mega menu.png2770×434 30.6 KB

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Hello @yzzadigital ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file

Add this following code at the bottom of page

.site-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
}

Save and preview

Hope this can help.

Transcy

4

https://9qifmasjg9x9awu6-65461747938.shopifypreview.com

Thank you in advance.

5

It didn’t work. Thank you for the help though. :slightly_smiling_face:

6

@yzzadigital
Hello,

Add This CSS Go To Online Store > Select Theme > Edit Theme > Assets > base.css

#Details-HeaderMenu-2 ul > li {
	width: 100% !important;
}

Like This

oscprofessional_0-1690274258531.png
oscprofessional_0-1690274258531.png1624×580 112 KB

7

It should be aligned below its specific menu tab not centered. For my example, it’s under the “Ring” menu tab and the same goes for other menu lists. :slightly_smiling_face: