Solved

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

SugMonsterKids
New Member
9 0 0

As you can see below, the drop-down menu for some items is too wide. This is in the Boost theme.

 

This looks good . . .

Screenshot 2023-10-05 at 2.04.50 PM.png

 

This has too much space . . .

Screenshot 2023-10-05 at 2.04.41 PM.png

Can anyone help me change this?

Site: sugarmonsterkids.com

Accepted Solutions (2)

marvic
Explorer
53 4 13

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?!):
Screenshot 2023-10-06 at 10.55.51 am.png

View solution in original post

marvic
Explorer
53 4 13

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.

View solution in original post

Replies 6 (6)

marvic
Explorer
53 4 13

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?!):
Screenshot 2023-10-06 at 10.55.51 am.png

SugMonsterKids
New Member
9 0 0

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!

Screenshot 2023-10-05 at 7.56.20 PM.png

SugMonsterKids
New Member
9 0 0

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

Screenshot 2023-10-06 at 2.35.25 PM.png

 Any advice on how to fix that?

SugMonsterKids
New Member
9 0 0

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

 

Screenshot 2023-10-06 at 2.35.25 PM.png

marvic
Explorer
53 4 13

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.

SugMonsterKids
New Member
9 0 0

That worked perfectly! Thank you for all your help!