[Support request] How to create a colored border around the menue items in the primary navigation

[martin]

Hi there !

Tried to make around every single menue item in the primary navigation a colored (white) border.
the url is ea-tech.at , thxs !

rgds martin

[David]

Hi there,

this CSS will add a border to the menu item:

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

[martin]

Perfect! Thxs for your swift reply !

rgds

[David]

You’re welcome

[Henry]

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!

[Fernando]

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

[Henry]

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?

[Fernando]

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

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

. precedes a class.

[Henry]

(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!

[Henry]

Thanks I’ll try it out

[Fernando]

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

[Author]

Posts