🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Primary Navigation Spacing and Height

Home Forums Support Primary Navigation Spacing and Height

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

    #1134594
    Tom
    Lead Developer
    Lead Developer

    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 🙂

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

    #1135003
    David
    Staff
    Customer Support

    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.

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

    #1135247
    David
    Staff
    Customer Support

    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.

    #1135286
    Andy

    Perfect, thank you!

    #1135785
    David
    Staff
    Customer Support

    Glad we could be of help

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