Archived topic

Primary Navigation Spacing and Height

7 replies · Started by Andy on January 16, 2020

Viewing posts 1–8 of 8

January 16, 2020 at 11:52 am #1134406

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.

January 16, 2020 at 6:01 pm #1134594

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 :)

January 17, 2020 at 5:30 am #1134959

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.

January 17, 2020 at 6:18 am #1135003

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.

January 17, 2020 at 7:41 am #1135229

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.

January 17, 2020 at 7:49 am #1135247

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.

January 17, 2020 at 8:09 am #1135286

Perfect, thank you!

January 18, 2020 at 1:53 am #1135785

Glad we could be of help

This archived topic is closed to new replies.

Start building better websites today.