How to create a colored border around the menue items in the primary navigation

Hi there,

this CSS will add a border to the menu item:

.main-navigation li {
    border: 1px solid #fff;
}

Perfect! Thxs for your swift reply !

rgds

You're welcome

Hi David / Support Team

Just asking about the above - what if I wanted to only allow the border on certain menu items (i.e. not ALL of the menu items)?

.main-navigation li {
    border: 1px solid #fff;
}

^ I think the above needs an extra class added to it that I can apply to the menu items that I would like to see a border.

Thanks!

Hi Henry,

You can add nth-of-type to your CSS selector. Example:

.main-navigation li:nth-of-type(1) {
    border: 1px solid #000;
}

This selects just the first instance of the selector. You can learn more here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

Thanks for the very fast reply, Fernando! So, I would create a class like "bordered" to show the border, so using your code it would look like this:

.main-navigation li:bordered {
    border: 1px solid #000;
}

^ And then add the class "bordered" to the CSS selector for the desired menu item in WordPress Menu?

Good idea. That should work too. It would be something like this:

.main-navigation li.bordered {
    border: 1px solid #000;
}

. precedes a class.

(Below reply came in a mid-air collision with your reply)

Ah yes, I see what you are referring to for: "li:nth-of-type(1)" (basically the child menu items)

Yes that is helpful but not what I am trying to achieve - I'd like to ONLY add the border effect to certain menu items.....

Can you think of CSS that would make that happen?

Thanks!

Thanks I'll try it out

You're welcome, Henry! Let us know how it goes.