Border Between Navigation Items

Add a line or bullet between your menu items.

The code provided below will allow you to place any text or HTML entity between the items in your primary navigation menu.

Example of a pipe between menu items

The code is setup to put a pipe between your items, but you can switch that out inside the “content” line in the CSS.

.main-navigation .main-nav > ul > li:not(:last-child) {
  position: relative;

 .main-navigation .main-nav > ul > li:not(:last-child) > a:after {
  content: "|";
  position: absolute;
  display: block;
  right: 0;
  top: 0;

You may want to put this inside a media query so it does not appear on your mobile navigation.

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