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.
4 comments
Nora
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.
Sridhar Katakam
Thanks for letting us know Nora.
I usually add custom CSS in the child theme.
Nora Holmquist
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.
Sridhar Katakam
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.