Archived topic
Navigation Menu Vertical Lines
5 replies · Started by Stephen on December 12, 2022
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;
}
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;
}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;
}
Aah its not the last child.
Try this instead:
.main-navigation .main-nav > ul > li:nth-child(4) {
border-right: 2px solid white;
}Fantastic thank you - easy when you know how !
Glad to be of help!
