Coding Triumph

Although the wp_nav_menu() function allows the user to customize different aspects of WordPress menus, it’s still missing the functionality to add a separator between menu items such as “|”. Fortunately, this issue can be easily fixed either with PHP or pure CSS. In this post, we’ll be using the latter simply because it’s simpler and easy to implement. So, without further ado, let’s get started.

Assuming that the menu is in the footer and it has the class of .bottom-nav, we’ll be using the CSS ::after pseudo-classes to add the | (vertical slash) as a separator between menu items. This is the script:

.bottom-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.bottom-nav ul li {
    display: inline-block;
}

.bottom-nav ul li::after {
    content: "|";
    display: inline-block;
    margin-left: 0.75rem;
    margin-right: 0.5rem;
}

That’s all! By the way, I’m using the same script for this website. Check the menu in the footer.