All things Shopify and commerce
I have these two dropdown menus on my store that open when you hoover over them. I had to force the width to 208px to make sure all the content is on one line, but that makes the second dropdown too big (there is a big white space on the right I don't like).
Is there a way where I can designate these two menus differently and assign them their own width? Or another solution?
My website is jajamoon.com and I have this custom CSS code:
ul.list-menu.list-menu--inline span {
font-size: 13px;
}
.header {
display: flex !important;
justify-content: space-between;
align-items: center;
}
.mega-menu {
position: relative !important;
}
.mega-menu[open] .mega-menu__content {
width: 208px;
}
.header__submenu .header__menu-item {
justify-content: flex-end;
text-align: left;
}
Solved! Go to the solution
This is an accepted solution.
Hi @nahuel_123
Try this one.
/* DIY ACCESSORIES */
div#MegaMenu-Content-3 {
width:185px !important;
}
/* DIY BAG */
div#MegaMenu-Content-2 {
width:220px !important;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Please share your shop URL. I can help you
Thank you: jajamoon.com
This is an accepted solution.
Hi @nahuel_123
Try this one.
/* DIY ACCESSORIES */
div#MegaMenu-Content-3 {
width:185px !important;
}
/* DIY BAG */
div#MegaMenu-Content-2 {
width:220px !important;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025