Divider Bars Between Secondary Nav Menu Items

Hi Brian,

Try this:

.secondary-navigation .secondary-menu > li > a {
    border-right: 2px solid #000000;
}
.secondary-navigation .secondary-menu > li:last-child > a {
    border-right: 0;
}

Thanks for the quick response!

Forgot to mention that's the first thing I tried, and no dividers showed up. Just tried again and still no luck.

Ahh sorry. Adjusted the code above.

Thanks, that worked!

Followup questions:

1) Can the height be customized on these bars (borders)?
2) Can I specify which menu items I would like to have a border? (For example, I am using the float right CSS class for a few menu items, and do not want those to have borders)

I appreciate all the help.

1) This is a little more complicated. I'm searching for a similar request before.

2) You would add custom CSS class to the menu item you want the border, like nav-border:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then change the CSS to this:

.secondary-navigation .secondary-menu > li.nav-border > a {
    border-right: 2px solid #000000;
}

Thank you the custom classes worked great!

Ok I don't think we can use border if you want to control the height. Try this instead:

@media (min-width: 769px) {
    .main-navigation .main-nav > ul > li:not(:last-child) {
        position: relative;
    }

    .main-navigation .main-nav > ul > li:not(:last-child) > a:after {
        content: " \007C";
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 10px;
    }
}

You should be able to control the size by changing the font-size property.

That did it! Except the top portion wasn't needed, just for future reference.

You guys have the best support of any Wordpress related theme or plugin I've come across by the way, not even close.

Awesome. Thanks for reporting back!

Glad we've been helpful :)

Hello,

I'm hoping to make this solution work. However, I am not sure what the final implementation is?

have created a footer menu, and I would like a vertical bar to separate items and then to style the bar height, etc.

Can you give me the summation of these steps?

Thank you in advance.

Best,

Jeremy

Any chance you can open a new topic and link us to the page in questions?

Thanks :)