[Resolved] Primary Navigation Spacing and Height

[Andy]

Hi,
I’m trying to recreate a menu similar to https://www.army.mod.uk/. The menu is full-width and each menu item is equal width and scales down responsively.
I’ve tried using flexbox to distribute the menu items evenly which works but there are other issues I’m not able to overcome:

@media (min-width: 1000px) {
    .main-navigation ul {
        display: flex;
        justify-content: flex-end;
        
    }
}

Because the Generatepress Customizer settings use line-height to set the height of the menu, if one menu item contains a lot more text than the rest, it wraps on to a 2nd line causing it to be much taller than the rest of the menu. If I try to set the height to 0 in the customizer and then set the menu height with CSS then the text is not vertically central.

I’ve included the development URL in the field below.

Any help much appreciated.

[Tom]

Hi there,

Played with this, and this is the best I could come up with:

.main-navigation .main-nav ul li a {
    line-height: inherit;
    padding-top: 15px;
    padding-bottom: 15px;
}

.main-navigation .main-nav ul li {
    display: flex;
    align-items: center;
}

.main-navigation .main-nav ul li[class*="current-menu-"],
.main-navigation .main-nav ul li:hover, 
.main-navigation .main-nav ul li:focus, 
.main-navigation .main-nav ul li.sfHover {
    background-color: #3d93d0;
}

It means adding the background color to the li element, but it should do the trick.

Let me know 🙂

[Andy]

Thanks Tom, it’s working quite well except the menu item with 2 lines breaks it. Also, it’s not quite filling the full-width of the header.

[David]

Hi there,

try this CSS instead:

@media (min-width: 1000px) {
    .main-navigation ul {
        display: flex;
    }

    .main-navigation ul li {
        flex: 1;
        min-height: 100px;
        position: relative;
    }

    .main-navigation .main-nav ul > li > a {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        line-height: 1 !important;
        text-align: center;
        box-sizing: border-box;
        border-right: 1px solid #022b39;
    }
}

You may want to adjust the menu item spacing to stop the nav from jumping to a new row on smaller desktop screens.

[Andy]

Awesome! – thanks David it works great. Unfortunately the design requires the borders not to be full-height so I had to change background colours/hovers back to the li.

However, by doing this only the a tag/text is clickable and not the whole menu item which isn’t ideal.

[David]

You could add the borders using a pseudo :before element like so:

.main-navigation ul li:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    top: 15px;
    border-right: 1px solid #000;
    pointer-events: none;
}

then you can remove the li top and bottom padding, adjust its height etc. You will need to tweak the height and top properties in the above as well.

[Andy]

Perfect, thank you!

[David]

Glad we could be of help

[Author]

Posts