Hi, does anyone know how i can reduce the width for this menu? only for desktop, i want to make it more clean so i dont want it to be full width
Hi @veluxe1 Welcome to Shopify Community can you please share the URL of your website
pass : tkbytyra
Seems like nothing changed
Hi @veluxe1,
I’ve refined the desktop navigation by limiting the menu width instead of keeping it full-width. This makes it look much cleaner and more aligned with the design. Please have a look!
max-width: 300px;
width: 100%;
If it work please mark my comint as solution.
Same, can you give more details? Need to change on theme css or base css in liquid?
You can add this css in the bottum of base.css file.
.menu-list__submenu {
max-width: 300px;
width: 100%;
}
Sorry about the last code. After looking at the screenshots you shared, I was able to get a much better understanding of how your menu is structured. I’ve updated the code accordingly, so could you please give this version a try, I’m hoping this one works correctly.
@media screen and (min-width: 990px) {
.header__row–top,
header-component,
header-component[sticky] {
background-color: #f2e9db !important;
}
.header__underlay-open {
background-color: transparent !important;
opacity: 0 !important;
visibility: hidden !important;
}
header-component .menu-list__submenu,
header-component .menu-list__submenu-inner,
header-component .mega-menu,
header-component .mega-menu__grid,
header-component .mega-menu__list,
header-component .mega-menu__column {
height: auto !important;
max-height: none !important;
min-height: unset !important;
overflow: visible !important;
background-color: #f2e9db !important;
}
header-component .menu-list__submenu {
position: absolute !important;
width: 240px !important;
max-width: 240px !important;
left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
border: 1px solid rgba(124, 37, 41, 0.15) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
z-index: 999 !important;
}
header-component .menu-list__submenu-inner,
header-component .mega-menu {
border: none !important;
box-shadow: none !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
header-component .mega-menu__grid {
display: block !important;
width: 100% !important;
padding: 15px 20px !important;
margin: 0 !important;
}
header-component .mega-menu__list {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
header-component .mega-menu__column {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
header-component .mega-menu__link,
header-component .mega-menu__link span {
display: inline-block !important;
text-align: left !important;
font-size: 13px !important;
letter-spacing: 0.05em !important;
text-decoration: none !important;
color: #7c2529 !important;
white-space: nowrap !important;
width: auto !important;
background: transparent !important;
}
header-component .mega-menu__link:hover {
opacity: 0.7 !important;
}
}
I fixed it.
I installed horizon theme (guessed in your site’s source code). Reproduced the problem. And fixed it:
Your theme is Horizon, and its submenu panel (.menu-list__submenu) is set to position: absolute; width: 100%; left: 0 - that’s why the dropdown spans the whole page. So the fix is just to shrink that panel and pin it under its own menu item, on desktop only.
Online Store → Themes → Edit code → assets/base.css, paste this at the very bottom:
/* Compact desktop mega-menu dropdown (Horizon). Desktop only - mobile drawer untouched. */
@media screen and (min-width: 990px) {
/* anchor each dropdown to its own menu item */
.menu-list__list-item { position: relative; }
/* shrink the panel from full-width to a compact dropdown under the item */
.menu-list__list-item:not([slot='overflow']) > .menu-list__submenu {
width: max-content !important;
max-width: min(90vw, 320px) !important;
left: 0 !important;
right: auto !important;
top: 100% !important;
padding-inline: 0 !important;
clip-path: none !important;
}
/* size the content to itself and stack the links vertically */
.menu-list__list-item:not([slot='overflow']) > .menu-list__submenu .mega-menu,
.menu-list__list-item:not([slot='overflow']) > .menu-list__submenu .mega-menu__grid { width: 100% !important; }
.menu-list__list-item:not([slot='overflow']) > .menu-list__submenu .mega-menu__grid { display: block !important; }
.menu-list__list-item:not([slot='overflow']) > .menu-list__submenu .mega-menu__link { display: block !important; }
/* give it a proper dropdown-card look */
.menu-list__list-item:not([slot='overflow']) > .menu-list__submenu .menu-list__submenu-inner {
transform: none !important;
padding: 14px 22px !important;
background: var(--color-background, #fff);
border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
border-radius: 10px;
box-shadow: 0 10px 30px rgb(var(--color-foreground-rgb) / 0.14);
}
}
Note 1: Change 320px to change dropdown width.
Note 2: Paste this reply into shopify AI / Sidekick. It will help you implement it.
If it solves your problem, like it and mark it as Solution
Best,
AjayCodeWiz -
Can you help me a bit more, if i change the menu to the left and logo to the centered, the submenu list still at the centered though, how to make it to the left too
Dear @veluxe1
Please try again with the code below.
@media screen and (min-width: 990px) {
.header__row–top,
header-component,
header-component[sticky] {
background-color: #f2e9db !important;
}
.header__underlay-open {
background-color: transparent !important;
opacity: 0 !important;
visibility: hidden !important;
}
header-component .menu-list__submenu,
header-component .menu-list__submenu-inner,
header-component .mega-menu,
header-component .mega-menu__grid,
header-component .mega-menu__list,
header-component .mega-menu__column {
height: auto !important;
max-height: none !important;
min-height: unset !important;
overflow: visible !important;
background-color: #f2e9db !important;
}
header-component .menu-list__submenu {
position: absolute !important;
width: 240px !important;
max-width: 240px !important;
left: 19% !important;
transform: translateX(-50%) !important;
right: auto !important;
border: 1px solid rgba(124, 37, 41, 0.15) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
z-index: 999 !important;
}
header-component .menu-list__submenu-inner,
header-component .mega-menu {
border: none !important;
box-shadow: none !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
header-component .mega-menu__grid {
display: block !important;
width: 100% !important;
padding: 15px 20px !important;
margin: 0 !important;
}
header-component .mega-menu__list {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
header-component .mega-menu__column {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
header-component .mega-menu__link,
header-component .mega-menu__link span {
display: inline-block !important;
text-align: left !important;
font-size: 13px !important;
letter-spacing: 0.05em !important;
text-decoration: none !important;
color: #7c2529 !important;
white-space: nowrap !important;
width: auto !important;
background: transparent !important;
}
header-component .mega-menu__link:hover {
opacity: 0.7 !important;
}
.header__columns.spacing-style {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__column.header__column--center {
order: 1;
}
.header__column.header__column--left {
order: 2;
}
.header__column.header__column--right {
order: 3;
}
}
Regards,
Eric from Shopplaza