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!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024