The native menu on the Divi theme is rather dull and uninspiring. In fact, most of my clients ask for dividers between the menu items to distinguish each menu item. However, there is no native setting to add this or any plugin that works correctly. In fact, the Divi Booster plugin doesn’t even carry this. Using some standard CSS, we will easily add in those dividers between menu items.

Picture above is the navigation bar with the dividers between menu items.

Add CSS code to the “Divi Theme Option” custom CSS field

Find the “Divi Option” button on the sidebar of your WordPress Dashboard. Click on it then scroll down to the Custom CSS section. It should look like the image above.

Once you find this field, copy the CSS code below to this input field and save. All done!

#top-menu .menu-item:before{
 content: '|';
 position: absolute;
 right: 7px; /* adjust this number as you see fit. This may depend on the spacing of your menu items */

#top-menu .menu-item:last-child:before{

#top-menu .menu-item-has-children .sub-menu .menu-item:before{

If you have any questions, suggestions, or new blog post ideas, please let me know in the comments! Thanks for visiting.