Add divider between items — Nav Menu element

How To
1

How can I add a divider between nav items with Nav Menu element? I know it’s possible with the Nav Menu (Nestable), but I want to use Appearance > Menu to update the menus.

Is this possible?

2

Hey @techtone,

you can achieve this using the menu items’ borders or pseudo elements. I created a small screencast to demonstrate.

1. border version CSS:

root .bricks-nav-menu > .menu-item + .menu-item {
  border-inline-start: 1px solid #000;
}

2. pseudo version CSS:

root .bricks-nav-menu > .menu-item {
  position: relative;
}

root .bricks-nav-menu > .menu-item + .menu-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  height: 1em;
  margin: auto;
  background-color: #000;
}

Let me know if that helps.

Best,

André

2 Likes
3

This was super helpful, André, thank you very much for taking your time to create a screencast.