[Resolved] Menu drop down going off of screen

[William]

Hi there,

On my site, I see that on certain browser widths, the menu for ‘Support’ goes off the edge of the screen.

I use a little CSS for the box-shadow and border-radius, so I don’t think it’s that – is there a way to fix this?

Kind regards,

[Leo]

Hi William,

Give this solution a shot:
https://docs.generatepress.com/article/navigation-dropdown/#opening-specific-sub-menus-to-the-left

[William]

Thanks for that, seems to work! The only thing I would say is that it looks a bit strange for the drop downs to be so far to the left and not under the menu content – is this a limitation of the menu? I prefer it looking the way before and when the content goes off the screen, for it to start a new line if that makes sense?

[David]

Hi there,

Sub Menus are set to a width of 200px… if you want you can change that using this CSS:

@media(min-width: 1056px) {
  .main-navigation ul ul {
    width: 110px; /* Adjust width to suit */
  }
}

[William]

Thanks for that – it was more that I liked the original look of the menu, but it seems a strange issue for the text to disappear off the side of the screen – is there not a way for this to not disappear but to start on a new line of the sub menu?

[Elvin]

This issue with the original look is, there’s no way for the submenu to detect if it’s overflowing outside of the viewport through CSS.

This kind of thing requires JS as we’ll have to compute the distance between the right bounds of the submenu to the right edge of the viewport. It’s a pretty advanced front-end customization scripting.

[William]

So is this a limitation of the menu with GP – that on certain widths the sub menu will be cut off?

[Elvin]

So is this a limitation of the menu with GP – that on certain widths the sub menu will be cut off?

With the default, yes. Rarely do menus from any theme have this out-of-the-box.

Hence, make do with custom CSS. And in your case w/c is pretty specific, custom JS.

[William]

Okay that’s not a problem, CSS works well and I can live with it – thanks as always!

[Elvin]

No problem. 😀

[Author]

Posts