Menu dropdown items expanding wider than max page size on wide pc screens

I’ve a menu that behaves as it should in tablet, laptop, ‘regular size pc’ and mobile. When I view on wide screen monitor the menu sub items (drop down) expand beyond the max page width applied to the whole site of 1400. The sub items expand onto the white space either side of the 1400 main real estate area. How do I force them to stay within the main view and not expand across the whole width of the monitor please?

Product:
Wix Studio

Check if the apply max width is turned on for the section. It’s right below the size options.

thanks, the section is, but the menu doesn’t comply, it moves and scales properly across breakpoints, but on a very wide screen the drop down items don’t, displaying across the full width of the screen outside of the 1400 max width of the rest of the website

You must have set the dropdown container width to streach. Go to layout settings of menu, then to the dropdown tab and in the container width, select either fit to menu or hug content. That should work.

If that does not work, add the menu into a container, make it an advanced CSS grid and in the column size, set the max value(there are min/max values for CSS column and rows) to 1440px.

Super star. Thanks so much, I’d missed the ability to change drop down items behaviour in the mini menu. I assumed they’d follow the menu element settings, (honestly, who coded wix?) Tried hug and fit to menu, second one worked best - only issue is that the drop down item titles are long and now default to two lines, not one as previously, I can live with that. Just had to adjust the padding on other breakpoints and I’ve got my site finished. thank you again, perfect answer!!

1 Like