[Support request] How To Do a Multi-Line Menu

[Eric]

Hi,

I mostly have 2 words menu items and from a spacing, it would be great if it could be on 2 lines. My header supports the spacing but I am not sure how to accomplish that on desktop/tablet.

A native support as a feature request would be great but in the short term I could use the help if that’s easy.

Thanks!

[David]

Hi there,

tricky to do that especially when Sub Menus are in play.

First off you would need to add some HTML to your menu item label so:

Model Portfolios would become:

<div><span>Model </span><span>Portfolios</span></div>

Then give the Menu Item a CSS Class of two-line

This article explains how to add a class to the menu item:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then we can use some CSS to change its layout for tablet/desktop:

@media(min-width: 769px) {
  .main-navigation .main-nav ul li.two-line>a {
    display: flex;
  }

  .main-navigation .main-nav ul li.two-line>a div {
    display: flex;
    flex-direction: column;
    line-height: 1.2em;
    justify-content: center;
  }
}

[Author]

Posts