mstephens268

This is great. Thank you!

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

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

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!

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.

That did the trick! Thanks for the help!

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

So, I had seen the article you linked to previously when I was researching. I want the panel width to = 100% of the menu bar width, assuming that the menu bar is (or can be) bound by the left and right most edges of the background which is highlighted on hover. If there are any adjustments I can make to the menu bar in order to make it = the width of the panel (as opposed to adjusting the panel width), I’d be open to that option as well.

Thanks for your help.

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

Here’s the link to site (build in progress). I’d like it to perform like the one on this site.

I’m having the same issue. It seems to exist at the global level for me, since it exists no matter which menu widget I use (Max Mega Menu, NavMenu so far). I’m using Astra Pro theme on a Mac (Safari). Any advice besides changing themes?

I’m having the same issue. Using Astra Pro theme with Elementor. Editing the Footer Widget padding, and when I went to Publish, it gave me the “Unable to save due to 1 invalid setting” error, and indicated “Invalid value” in one or more of the padding values. However, it doesn’t specify which one(s) and no matter what values I enter I get the same error. I can’t fathom deactivating themes or plug-ins every time something like this happens. Please help or refer me to someone who can. Thanks!