Navigation menu separator

Unless you are using Elementor Pro and using the Dynamic Nav widget your Menu style is derived from your theme. If your menu is in your Header section of your theme and not the body that elementor free controls then you will have to do heavy CSS mods. If that menu you saw is on a live site you ” can ” cheat and inspect it and rip the css code for it out of the style window but you will have to find the tags your theme uses to apply them.

Hi Jeremiah,

Thanks for the answer.

I solved it with this CSS:

.nav-padding-zero a {
border-right: 2px solid #051727;
padding:0px 30px 0px 30px!important;
}

@henriklm

Hello,

This is actually quite good solution. However, there is the case when I don’t need the separator for the last menu item. Any ideas on how to modify the CSS for that scenario?

Here is an example. Borders on the right except for the last element:

.menu-item:not(:last-child) a {
border-right: 2px solid #051727;
padding:15px 3px 15px 3px;
}
.menu-item:last-child a {
padding:15px 3px 15px 3px;
}

This is great, thanks. How would you put a coloured dot with equal spacing to the left and right of it, in between the menu items and not a line?