Vertical dividers between each main menu items

Hi athemes team,

Please I’d like to add a vertical divider between each main menu items. How I can do that ?

Thank you in advance. KR, Nassim

Dear Nassim,

You can use the CSS code snippet below:


.main-navigation li{
  border-left: 1px solid #fff000;
  border-right: 1px solid #fff000;
}

.main-navigation li:first-child{
  border-left: none;  
} 

.main-navigation li:last-child{
  border-right: none;  
} 

To apply it to your site, you need to insert it into your site’s additional CSS option or child theme’s style.css.

Regards,
Kharis