Hi everyone,
I’m trying to fix an issue with my navigation dropdown menu positioning.
When I hover over a menu item (example: Pokémon), the dropdown menu appears, but it shifts too far to the left instead of appearing directly underneath the parent menu item.
I’m trying to make the dropdown align directly below the hovered navigation item, similar to how many modern Shopify stores handle their menus.
Will need your store Url. Always provide that with your queries and password if password protected
@bangforyourbucktcg Thanks for reaching out to Shopify community with your concern. Can you please provide the URL of your store and if it is password protected please share the password too. Thanks
URL:https://bangforyourbucktcg.com/
PW: 123
Menu aren’t finalized, might remove/add some.
Hello @bangforyourbucktcg,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
@media (min-width: 769px){
li.mega-menu__column.mega-menu__column--span-1 {
text-align: -webkit-center !important;
margin-left: -10% !important;
}
[data-menu-grid-id="MegaMenuList-2"],
[data-menu-grid-id="MegaMenuList-3"],
[data-menu-grid-id="MegaMenuList-4"],
[data-menu-grid-id="MegaMenuList-5"] {
--menu-columns-desktop: 1 !important;
}
[data-menu-list-id="MegaMenuList-2"],
[data-menu-list-id="MegaMenuList-3"],
[data-menu-list-id="MegaMenuList-4"],
[data-menu-list-id="MegaMenuList-5"]
{
--menu-columns-desktop: 1 !important;
}
.overflow-menu:after {
display: none !important;
}
.header__row[style*="--border-bottom-width: 0px"] .menu-list__submenu.color-scheme-matches-parent, .header__row[style*="--border-bottom-width: 0px"] .overflow-menu.color-scheme-matches-parent::part(overflow) {
width: 19% !important;
margin-top: -32px !important;
left: auto !important;
}
}
You may try this solution – Horizon theme: drop-down menu alignment - #13 by tim_1
