Menu bar padding not scaling per page width

Hi mstephens,

MMM will not scale the menu items themselves depending on the width of the page. I.e. it will not ‘spread’ the menu items out to fill the width of the bar – left aligned items will be on the left, right aligned items on the right.

I think you will either need to set a fixed percentage width on each of the menu items:

https://www.megamenu.com/documentation/how-to-equally-distribute-menu-items-in-the-menu-bar/

Or adjust the padding/margin using custom CSS when the browser gets smaller:

https://www.megamenu.com/documentation/menu-items-wrapping-two-lines/

Regards,
Tom

I tried both solutions you’ve proposed. The first one did not work, because it gave all the menu items the same width, even though some of the words are longer. I’ve been working with the solutions offered in the second link and I think we’re on the right track.

I’ve added several increments to optimize the padding between elements:

}
/* Set top level menu item padding when screen width below 1200px */
@media only screen and (max-width : 1200px) {
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
padding-left: 15px;
padding-right: 15px;
}
}
/* Set top level menu item padding when screen width below 1100px */
@media only screen and (max-width : 1100px) {
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
padding-left: 10px;
padding-right: 10px;
}
}
/* Set top level menu item padding when screen width below 1000px */
@media only screen and (max-width : 1000px) {
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
padding-left: 7.5px;
padding-right: 7.5px;
}
}
/* Set top level menu item padding when screen width below 900px */
@media only screen and (max-width : 900px) {
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
padding-left: 5px;
padding-right: 5px;
}
}
/* Set top level menu item padding when screen width below 875px */
@media only screen and (max-width : 875px) {
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
padding-left: 3px;
padding-right: 3px;
}
}

However, I’m still getting line breaks at certain increments in between those widths.

If there was a way to make these percentage-based (e.g., a percentage of the container or menu bar width), then I believe this would prevent the undesirable line breaks/wrapping.

My goal is to match the responsive functionality of the menus on this site.

Hi mstephens,

The exact behaviour of the site you’ve linked to is not possible with MMM sorry. It uses a different system to us and won’t be compatible with other features in MMM (aligning items to the right, search icons etc).

You can, in the theme editor and in the css above, set the padding values to % if you want. E.g. change “10px” to “1%”. That may help but you won’t be able to exactly replicate the site you’ve linked to as it’s not using MMM.

Regards,
Tom

Hi mstephens,

A bit of an update.

I’ve been trying to replicate the same method as you’ve linked to.

It’s experimental (so try it on a dev site):

https://www.megamenu.com/documentation/flex-variable-width-menu-items/

If it works for you, then I think you’ll be able to remove all of your custom CSS that adjusts the padding based on the responsive breakpoint.

Regards,
Tom

• This reply was modified 6 years, 10 months ago by megamenu.

Thanks for looking into this for me, Tom. Unfortunately, this solution moves the second word of my two-word menu titles to a new line. Otherwise it looks great!

Hi mstephens,

I’ve updated the CSS on that page – please try it again.

You’ll also need to go to Mega Menu > Menu Themes > Menu Bar > Top Level Menu Item Padding and set the left and right padding to 0px (there is no need for the padding as the items will be spaced equally). You could also probably remove the top and bottom padding and use the Menu Height option instead.

Regards,
Tom

Hi Tom,

Thanks for making these updates. We’re almost there! I have one remaining request:

Could we make it to where, at a certain breakpoint, the font shrinks?

For example, on this site I’m working on, the rightmost menu item falls off the side of the page around 910px. If the font was set to shrink at around 950 in this case, and remain at that smaller size once the menu bar drops below the logo (a great feature, by the way), it would be awesome.

Thanks again for your help.
Matt

Hi Matt,

There’s some CSS at the bottom of this page which will reduce the font sizes:

https://www.megamenu.com/documentation/menu-items-wrapping-two-lines/

P.s. – about the menu dropping onto a new line on smaller screens. It is always your theme that determines the width and position of the menu (MMM just fills the width of the space that it is given by your theme) – so you have your theme authors to thank for it dropping onto a new line on smaller screens ??

Regards,
Tom

This is great. Thank you!

• This reply was modified 6 years, 10 months ago by mstephens268. Reason: Forgot to mark as resolved