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.