How to Add a Dot Separator Between Nav Menu Items in Bricks

Looking to add a circular dot separator between the nav menu items in your Bricks site?

Add the following at Bricks → Settings → Custom Code → Custom CSS:

.brxe-nav-menu .bricks-nav-menu > li:not(:last-child)::after {
	content: "\\25CF";
	position: absolute;
	right: -18px;
	top: 10px;
	font-size: 6px;

Save Settings and check the front end.

You may have to play with right and top values depending on the existing space between the menu items and menu item height.

In our test site, we have 8px of top and bottom padding each set under TOP LEVEL MENU control group.

Instant access to 390+ Bricks code tutorials with BricksLabs Pro


  • Nora Holmquist

    Upgraded to bricks Dots ok in builder and preview. However on front end I see the characters 25CF as the separator. Code is still in the CSS section of the Nav Menu element itself.

    • A

      Adding double slash works since Bricks seems to be stripping off one of them.

      I updated the CSS code in the tutorial.

      Also, I tested this in Bricks → Settings → Custom Code → Custom CSS.

  • After saving the CSS code in Bricks/Settings/Custom Code/CSS, when I move off the settings tab (click on Bricks/Templates for instance), then go back to settings, the backslash "\" has been removed from the code. Repeated multiple times with same result. Consequently what I see between each menu item are the characters 25CF. However, when I moved the code to the CSS section of the Nav Menu element itself, it worked.

Leave your comment