Elementor Menu Seperator

Share on facebook
Share on whatsapp
Share on email

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

Elementor Menu Seperator 1
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: " | ";

Elementor Menu Seperator 3

Step 2: Set Vertical Padding to 0

Elementor Menu Seperator 5
Here is the video version 😀

Subscribe to our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Share this post with your friends

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on reddit
Share on xing

Leave a Reply

Your email address will not be published. Required fields are marked *