May 29, 2022/4 comments/

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

Categories: Bricks, Free
Tags: CSS, Nav Menu

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.

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping people by researching and solving problems related to WordPress and building websites.

Instant access to all 250+ Bricks code tutorials with BricksLabs Pro

4 comments

  • Nora Holmquist
    1 year ago Reply

    Upgraded to bricks 1.4.0.2. 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
      Sridhar Katakam
      1 year ago Reply

      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.

  • Nora
    1 year ago Reply

    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

 

Related Tutorial(s)