Off Canvas Menu Item Border

Add a left border to menu items in the off-canvas menu.

This code will give your off-canvas menu a solid border on the left side of the item that is “current page”.

You may need to adjust the color and positioning.

@media (max-width: 1140px){
.main-navigation .main-nav ul li[class*="current-menu-"] > a:before{
	content: '';
	position: absolute;
	margin-left: -24px;
	background-color: var(--accent);
	width: 4px;
	height: 100%;

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

Leave a Comment