Shopify themes, liquid, logos, and UX
As you can see below, the drop-down menu for some items is too wide. This is in the Boost theme.
This looks good . . .
This has too much space . . .
Can anyone help me change this?
Site: sugarmonsterkids.com
Solved! Go to the solution
This is an accepted solution.
Hi there!
Are you familiar with the CSS section in the Theme Editor? Try adding this code into the CSS section of your Navigation Bar:
.mega-dropdown {
max-width: fit-content;
left: auto !important;
}
.grid {
display: inline-flex;
grid-column-gap: 30px;
margin-left: -70px !important;
}
Make sure that it works on mobile as well! If it doesn't work you can use @media screen to implement the CSS for Desktop only.
It should look like this (I hope that's what you wanted?!):
This is an accepted solution.
I'm not an expert in this but you could try to force overflow/prevent line breaks with
white-space: nowrap;
Make sure to target the right element.
This is an accepted solution.
Hi there!
Are you familiar with the CSS section in the Theme Editor? Try adding this code into the CSS section of your Navigation Bar:
.mega-dropdown {
max-width: fit-content;
left: auto !important;
}
.grid {
display: inline-flex;
grid-column-gap: 30px;
margin-left: -70px !important;
}
Make sure that it works on mobile as well! If it doesn't work you can use @media screen to implement the CSS for Desktop only.
It should look like this (I hope that's what you wanted?!):
That looks exactly what I'd like it to be. I added it but it's cutting off the beginning of the words — see screenshot. What did I miss? Thank you so, so much for your help!
I just figured out to just change the margin-left to -30px and that fixed it. The only thing I'm having a hard time with is now one item is text wrapping in the drop down...
Any advice on how to fix that?
I just figured out to just change the margin-left to -30px and that fixed it. The only thing I'm having a hard time with is now one item is text wrapping in the drop down...
This is an accepted solution.
I'm not an expert in this but you could try to force overflow/prevent line breaks with
white-space: nowrap;
Make sure to target the right element.
That worked perfectly! Thank you for all your help!
Learn 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, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025