[Resolved] Menu list item and anchor tag alignment

[Andy]

Hi,

I’m trying to make each menu list item the same width but also break longer anchor tags on to 2 lines. I’ve added a line break to the longer item but can’t get it to align centrally and fill the height of the list item.

Any help appreciated.

[Tom]

Hi there,

I wonder if this would do it:

.main-navigation:not(.toggled) .main-nav ul li a {
    line-height: normal;
}

.main-navigation:not(.toggled) .main-nav ul li {
    height: 65px;
    display: flex;
    align-items: center;
}

Let me know 🙂

[Andy]

Thanks Tom, thats made the menu items equally spaced and centred the text. However now the anchor tag doesn’t fill the height of the li tag.

Any further assistance appreciated.

[David]

Hi there,

try this CSS instead:

.main-navigation:not(.toggled) .main-nav ul li {
    height: 65px;
    display: flex;
    flex-direction: column;
}

.main-navigation:not(.toggled) .main-nav ul li a {
    line-height: normal;
    flex: 1;
    display: flex;
    align-items: center;
}

[Andy]

Thank you, that corrects the height issue but now the li’s are not equal widths. Also is there any way for the widths to reduce until the toggle menu kicks in?.

[David]

Can you disable your cache ? Make it easier to tweak the CSS in dev tools.

With equal widths – is this to divide up the total space available or a minimum pixel width ?

[Andy]

Sorry David, I thought I’d replied to this but I must have not pressed submit.

Ideally, it would be a minimum pixel width of say 210px. Also, when I change my navigation settings to ‘Use navigation as header’ it breaks the layout making the navigation display as a vertical list squashed into the right-hand corner. So for the time being I’ve had to comment out that code. But by doing so it breaks the 2 line alignment.

Any further help appreciated.

[David]

Yeah the Navigation as Header and the floated nav uses different CSS.
So how will this underline hover effect work if we vertically center the nav elements – as the baseline for your 2 line menu item will be lower ?

[Andy]

I will just move the underline hover effect to below the 2nd line, the same distance apart as the other links.

[David]

Try this CSS to vertically center links whilst maintaining the full height hover:

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

.main-navigation .main-nav ul li a {
    line-height: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

[Andy]

Thank you works perfectly. Not sure having the equal width li items is totally necessary but would be good if possible.

[David]

So try this CSS instead:

@media (min-width: 1000px) {
    .main-navigation ul {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
    }
    
    .main-navigation .main-nav ul li a {
        line-height: 40px;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }
    
    .main-navigation:not(.slideout-navigation) .main-nav {
        flex: 1;
    }
    .main-navigation li {
        flex: 1 0 20%;
        max-width: 240px; /* Adjust accordingly or remove */
    }
}

I would suggest reducing the Customizer > Layout > Primary Nav > Menu Item Width to around 20px.

[Andy]

Thank you David, awesome code as always!. I’m pretty comfortable with CSS but still find the flexbox layout a little difficult to implement with more complex designs.

Thanks again!

[David]

yeah Flex can be a bit of a mind bender _ glad to be of help.

[Author]

Posts