[Resolved] Navigation Menu Vertical Lines

[Stephen]

Hi, I ve added vertical lines to my Nav Menu with the CSS below which adds a left border to each menu item.

So far I cant work out the CSS to add only the last border on the right.

– Can you help me with this ?

Thanks
Stephen

.main-navigation .main-nav > ul > li {
border-left: 2px solid white;
}

[David]

Hi there,

add this CSS to include the last items right border:

.main-navigation .main-nav > ul > li:last-child {
    border-right: 2px solid white;
}

[Stephen]

Hi, thank you yes I cant get that to work. Maybe its because I have other CSS as below for the nav bar.

Maybe its not the last-child with my arrangement ?

.main-navigation .menu-bar-items {
position: absolute;
right: 0;
}

.nav-menu-cart {
display: none;
}

[David]

Aah its not the last child.
Try this instead:

.main-navigation .main-nav > ul > li:nth-child(4) {
    border-right: 2px solid white;
}

[Stephen]

Fantastic thank you – easy when you know how !

[David]

Glad to be of help!

[Author]

Posts