Menu dividers

Here is a useful CSS technique to add menu dividers to your menus.

#menu-footer.menu > li:not(:last-child) {
	position: relative;
	padding-right: 0.6em;
}

#menu-footer.menu > li:not(:last-child) > a:after {
	border-right: 1px dotted #9b9b9b;
	content: "";
	height: 12px;
	width: 1px;
	display: block;
	position: absolute;
	right: -7px;
	top: 50%;
	margin-top: -5px;
}

In the above example, I am adding vertical dividers to a Footer Bar widget menu. The first bit of code adds some extra padding to the right of each menu item apart from the last. The second bit of code adds the dividers to the menu links (excluding the last menu link) through the use of the ::after pseudo-element.

Footer bar menu dividers
Footer bar menu dividers

You might want to adjust your paddings according to the menu you are working on. For dividers on the main menu, just replace the #menu-footer.menu class with the .menu class!

GeneratePress logo

Need help on customizing GeneratePress or GenerateBlocks?

Helpful info

Adding CSS

Adding PHP

Using a child theme

Keep up to date with newly released articles

Sign up to the Knowledge Base newsletter

You will only receive an email when new content is added in the Knowledge Base. No spam, that's a promise!