Archived topic
Help add vertical line | between primary navigation menu items
4 replies · Started by Shaun on August 29, 2022
Viewing posts 1–5 of 5
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
Hi there,
Try this:
.main-navigation .main-nav > ul > li:not(:first-child) {
border-left: 2px solid white;
}Thx Ying
Can I reduce the height of the border to something like 50% vertically centred?
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;
}
This archived topic is closed to new replies.
