How do I change the width of dropdown menu in the Boost theme?

[SugMonsterKids]

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

[marvic · 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?!):

[marvic · 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?!):

[SugMonsterKids]

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!

 

[SugMonsterKids]

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?

[SugMonsterKids]

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...

 

[marvic · 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.

[SugMonsterKids]

That worked perfectly! Thank you for all your help!