Menu Cutoff Issue on Smaller Laptop Screens

[npn]

I’m having an issue with the display height of my Solutions & Products menu on laptop screen sizes that are smaller

Example pictured = 1366 x 720px

The classes that determine each row’s height are:

.new-mega-menu-digi
.new-mega-menu-auto
.new-mega-menu-pwr

located in Pro > Theme Options > Global CSS

The class values are set using calc() via the following:

• The vh values are X out of 100 (to cover the entire device screen height)
• The subtracted pixel values are one-third (36px) of the combined header bar heights (108px total)

This menu is setup within Header GLOBAL (New - MAIN)

[friech]

Hi @npn,

Thank you for writing in, instead of fixed height please use a min-height so the div will have room to expand. Then on the divs flex option, choose custom and set the flex-grow to 1, so those divs will stretch.

Please note that we do not provide support for any customization.

Cheers!

[npn]

Hey there @friech,

I changed the calc() values to min-height vs fixed height per your instruction.

Until I change the row div to flex-grow: 1 it seems to somewhat work, but then when I do the row div stretches too much.

Example pictured = 1366 x 720px

This also seems to create an issue with the column divs within the row div not stretching to 100% height to fill the row div evenly.

[christian]

Hey @npn,

That is the intention of my colleague’s solution. To give the elements within your navigation some breathing room but the result of that is it will go off-screen and you’ll have a scrolling issue because any dropdown is not designed to be scrollable.

Going back to your first screenshot. You can already see there that space within the Row is already limited. You can maybe reduce some space (margins and paddings) between the menu items to make them fit but that’s the only thing you can do in that situation.

What I’d recommend instead is you start your mobile navigation at 1366px. Otherwise, you’d need a fair amount of custom CSS code to adjust spacing and layout per screen size and that is beyond the scope of our theme support.

Watch out for the coming Responsive Styling feature though as that might open some possibilities for this case. More coming soon features were mentioned here https://theme.co/content/status-report-may-14-2021

Thank you for understanding.

[npn]

Hey @christian,

Thanks for the suggestion.

Currently I’m using the breakpoints within the editor to hide this version of the navigation and show the mobile version.

How would I alter the range of the global “Laptop” breakpoint?

[npn]

I found a workaround for the breakpoints by setting custom breakpoints for specific elements based on this post: How to set custom Breakpoints in PRO?

[ruenel]

Hello @npn,

We are glad you’ve figured out a way to resolve your issue.
Thank you very much for letting us know.

Cheers.