[Support request] Help add vertical line | between primary navigation menu items

[Shaun]

Hi
I want to add a vertical line between primary menu items. How can I do this?

• I don’t want a line before the first menu item or after the last one
• I want to be able to specify the colour
• I want to be able to adjust the padding

Thanks
Shaun

[Ying]

Hi there,

Try this:

.main-navigation .main-nav > ul > li:not(:first-child) {
    border-left: 2px solid white;
}

[Shaun]

Thx Ying

[Shaun]

Can I reduce the height of the border to something like 50% vertically centred?

[Fernando]

Hi Shaun,

You can try this CSS instead:

.main-navigation .main-nav > ul > li:not(:first-child) :before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 50%;
    transform:translateY(-50%);
    background-color: #fff;
    width: 2px;
    z-index: 999;
}

.main-navigation .main-nav > ul > li:not(:first-child) {
    position: relative;
}

[Author]

Posts