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


Using BoxShadows effectively in Elementor

CSS’s BoxShadow is awesome. It allows us to easily cast shadows from objects and boxes, creating a three-dimensional effect. Google uses this effect extensively to

Möchten Sie Ihr Unternhemen pushen?

Schreiben Sie uns und bleiben Sie in Kontakt


Let's have a chat

Erfahren Sie, wie wir 100 Top-Marken zum Erfolg verholfen haben.