[Resolved] Nav-Menu Separators

[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.

[Leo]

Hi Shane,

Just tested the CSS and that should still work.

Are you able to provide the link to your site?

Thanks!

[Shane]

@leohsiang – Here: Website

[Leo]

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.

[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.

[Leo]

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 🙂

[Leo]

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.

[Shane]

@leohsiang – The code works wonderfully 🙂 Thank you for the really awesome support!

I’ll mark this as resolved.

[Leo]

You’re welcome 🙂

[Author]

Posts