[Resolved] Menu list item and anchor tag alignment

Home Forums Support Menu list item and anchor tag alignment

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1177368
    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.

    #1178250
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1178456
    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.

    #1178919
    David
    Staff
    Customer Support

    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;
    }
    #1178934
    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?.

    #1178941
    David
    Staff
    Customer Support

    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 ?

    #1185715
    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.

    #1186001
    David
    Staff
    Customer Support

    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 ?

    #1186018
    Andy

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

    #1186069
    David
    Staff
    Customer Support

    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;
    }
    #1186083
    Andy

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

    #1186103
    David
    Staff
    Customer Support

    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.

    #1186508
    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!

    #1186858
    David
    Staff
    Customer Support

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

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.