- This topic has 10 replies, 4 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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
Customer Support
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!
Customer Support
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.
- You must be logged in to reply to this topic.
