HELP - Drop down menu alignment not centre

Store Design
,

Topic summary

A user encountered an alignment issue with dropdown menus in Shopify’s Debut theme—the menus weren’t centering properly on hover, though they appeared correct when zoomed in.

Problem identified:

  • The menu item had position: static in CSS, preventing proper centering across different screen sizes and zoom levels

Solutions provided:
Multiple community members offered CSS fixes targeting the navigation dropdown elements:

  • Adding position: relative !important to .site-nav--has-centered-dropdown
  • Setting right: auto !important on specific dropdown classes
  • Inserting custom CSS into theme.scss.css file via Shopify Admin

Resolution:
The issue was successfully resolved using one of the provided CSS solutions. The user confirmed the fix worked and thanked the contributors.

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

Hi All,

DEBUT THEME

For some reason the drop down menu is not centered when hovered over. However when you zoom in on the page, the alignment can be seen, however not everyone views the website on the same size screen or zoom so it needs to be able to adjust?

Any help would be appreciated, pictures attached below. Website - www.luxurybrandjewellery.com.au

KieranK95_0-1669705618229.png
KieranK95_0-1669705618229.png400×154 27 KB

KieranK95_1-1669705618219.png
KieranK95_1-1669705618219.png399×154 26.1 KB

Thanks in advance!

1 Like
2

Hi @KieranK95

Just add this custom CSS to your theme, the dropdown is not aligned center because the menu item has a position static in the CSS.

.site-nav--has-centered-dropdown {
  position: relative !important;
}

James_FoxEcom_0-1669706950772.png
James_FoxEcom_0-1669706950772.png3026×1080 259 KB

1 Like
3

@KieranK95 ,

.site-nav__dropdown--right.site-nav__dropdown--centered {
    right: auto !important;
   
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
#SiteNavLabel-academy-of-learning {
right: auto!important;
}
div#SiteNavLabel-about {
right: auto!important;
}

Screenshot :- https://prnt.sc/Y_HlL_6fPBXU
Screenshot :- https://prnt.sc/Vh2AnDQLeKAh

1 Like
5

Thank you @ZestardTech it worked!

Thank you @oscprofessional and @James_FoxEcom for your replies also :slightly_smiling_face:

much appreciated

2 Likes
6

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

7

Don’t hesitate to let me know if you have further questions

Regards