Header drop down menu cut off on screen

[hannahlincoln]

Hey,

We’re having an issue where the drop-down on the menu is too high and the top 2 links are disappearing off-screen as well as the top visible one being cut off (see screenshots) can anyone help with this please?

[christian]

Hey @hannahlincoln,

The sub-menus will show up beside its parent menu but if it detects that it will overflow towards the bottom of the screen, it will show up above. There is currently no way to make it display in the middle.

For that reason and for the size of your menu, I’d recommend you use a proper Mega Menu as your other sub-menus are really lengthy so it get cropped.

Here’s a tutorial to build a Mega Menu using the latest version of Pro https://www.youtube.com/watch?v=zgAMBLRxG_w&t=913s

Alternatively, you can use UberMenu. See https://theme.co/docs/ubermenu

Hope that helps.

[hannahlincoln]

Thank you @christian I will look into the mega menu! I didn’t realise you guys had released it, excited to try it and see if we can make it work for our menu. Any tips on how to handle it when you have multiple drop-down layers?

[christian]

Hey @hannahlincoln,

In the current setup, the menu drops down vertically. In a mega menu setup, you will want to lay things out horizontally like the blue rectangle in the screenshot below.

I’d recommend you use UberMenu if you want a simple mega menu and simple to set up.

Hope that helps.