Elementor Menu Seperator

Teile den Beitrag

Share on facebook
Share on linkedin
Share on twitter
Share on email

In order to seperate menu items in Elementor with a line we can use the code shown below.

nav li + li:before {
content: " | ";
padding: 0px;
margin: 0px;
position: absolute;
color: #878787;
.elementor-nav-menu--dropdown li + li:before {
content: " ";
.elementor-sticky--active .elementor-nav-menu__align-left .elementor-nav-menu {
margin-right: auto;
margin-left: auto;

Step 1: Copy and paste

We have to copy the shown code and paste it in the custom css section of our Menu item.

We can adjust the color of our seperator by manipulating color: #878787;

Also we are able to change our seperator by manipulating content: " | ";

Step 2: Set Vertical Padding to 0

Here is the video version ūüėÄ

Subscribe To Our Newsletter

Get updates and learn from the best


Möchten Sie Ihr Unternehmen pushen?

Schreiben Sie uns und bleiben Sie in Kontakt