Add in dividers/horizontal lines into secondary menu

Hi

If you don’t already have a custom.css you should install a plugin like custom CSS plugin then add the following to the custom css area.

#nav-main li + li::before {
    content: " | ";
display: block;
margin-top: 10px;
float: left;
}

#nav-main li li + li::before {
    content: " ";
}

Try adding this to your custom css box in the theme options:

#nav-second ul.sf-menu>li>a {
border-right: 1px solid #ddd;
}

Kadence Themes

With this:

#nav-second ul.sf-menu>li:last-child > a {
border: none;
}

Hi Kadence,

Thanks for this, it’s worked!!

Do you know if it’s possible to have a slightly shorter line, so it’s not the full height of the secondary menu??

Thank you once again!

You could try this?

#nav-second ul.sf-menu>li>a:before {
content: "";
display: block;
height: 20px;
float: right;
border-right: 1px solid #ddd;
}
#nav-second ul.sf-menu>li:last-child >a:before {
border:none;
}

That is perfect! Just what I was looking for.

Thank you so much