[Resolved] Nav-Menu Separators

Home Forums Support [Resolved] Nav-Menu Separators

Home Forums Support Nav-Menu Separators

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #292771
    Shane
    .main-navigation .menu > li > a {
        border-right: 2px solid #000000;
    }
    
    .main-navigation .menu > li:last-child > a {
        border-right: 0;
    }

    I’m using the above code to add separators to my navigation menu. It does work….. However, the “last-child” bit doesn’t and the last item on my menu still has a border to the right.

    Has the CSS been updated or is there a fix?

    Thanks.

    GP Premium 1.2.96
    #292809
    Leo
    Staff
    Customer Support

    Hi Shane,

    Just tested the CSS and that should still work.

    Are you able to provide the link to your site?

    Thanks!

    #293005
    Shane

    @leohsiang – Here: Website

    #293019
    Leo
    Staff
    Customer Support

    ahh I believe the search icon is being treated as the last menu item which is why it looks like it’s not working.

    I assume you are not finished adding menu items yet? Once you are done I can provide CSS to target the last (or second last in this case) menu item and take away the border.

    Let me know if this works for you.

    #293025
    Shane

    For now I’ve put the search in the “Top Bar”. However, I would like to obtain the CSS for future reference if I decide to move the search back to the nav-bar.

    #293038
    Leo
    Staff
    Customer Support

    Something like this should work:

    .main-navigation .menu .menu-item-## > a {
        border-right: 0;
    }

    You would need to replace ## with the unique menu item ID number. You can find it by using Chrome, right click on the last menu item and select Inspect.

    So for your current navigation, the Apps item has ID of 31.

    Let me know if this makes sense πŸ™‚

    #293041
    Leo
    Staff
    Customer Support

    Actually scratch that, this would work better without having to find the menu item number:

    .main-navigation .menu > li > a {
        border-right: 2px solid #000000;
    }
    
    .main-navigation .menu > li:last-child > a,
    .main-navigation .menu > li:nth-last-child(2) > a {
        border-right: 0;
    }

    Let me know.

    #293337
    Shane

    @leohsiang – The code works wonderfully πŸ™‚ Thank you for the really awesome support!

    I’ll mark this as resolved.

    #293402
    Leo
    Staff
    Customer Support

    You’re welcome πŸ™‚

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