[Resolved] Divider Bars Between Secondary Nav Menu Items

Home Forums Support Divider Bars Between Secondary Nav Menu Items

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #366004
    Brian

    Hello,

    I was wondering if there was a way to add divider bars between secondary navigation menu items. This allows me to do it with the primary navigation:

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

    .main-navigation .menu > li:last-child > a {
    border-right: 0;
    }

    Thank you!

    GP Premium 1.4.2
    #366019
    Leo
    Staff
    Customer Support

    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;
    }
    #366031
    Brian

    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.

    #366033
    Leo
    Staff
    Customer Support

    Ahh sorry. Adjusted the code above.

    #366293
    Brian

    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.

    #366518
    Leo
    Staff
    Customer Support

    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;
    }
    #366885
    Brian

    Thank you the custom classes worked great!

    #366930
    Leo
    Staff
    Customer Support

    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.

    #367213
    Brian

    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.

    #367281
    Leo
    Staff
    Customer Support

    Awesome. Thanks for reporting back!

    Glad we’ve been helpful 🙂

    #993346
    Jeremy

    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

    #993372
    Leo
    Staff
    Customer Support

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

    Thanks 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.