[karolinevindParticipant]

Hi!

I want to add a border around just one of the menu items in the navbar, and not all of them.
How can I do that?

[Paul RModerator]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Please specify which menu item you want to add border.

Thanks

[karolinevindParticipant]

The URL is: http://spot-cafe.dk/

And I want to add a border to: “bestil bord”

[LelyModerator]

Hi There,

Thank you for the URL.
Please add the following CSS on Appearance > Customize > Custom > Edit Global CSS:

.x-navbar .desktop .x-nav > li#menu-item-21 > a {
    border-color: blue; /*Change to your preferred border color*/
}
.x-navbar .desktop .x-nav > li > a {
    border: 5px solid transparent; /* Change 5px to your preferred border width*/
}

Hope this helps.

[karolinevindParticipant]

Thank you!

But is there a way to make the border a little closer to the text?
Right now it is the same height as the navbar. I want to be just around the text.

[JoaoModerator]

Hi There,

Please try using this code instead, this will give your link a button style:

li#menu-item-21> a {
    padding-top: 18px;
}
li#menu-item-21> a:hover > span {
    box-shadow: none;
}
li#menu-item-21> a > span {
    background-color: #00B8FF;
    padding: 8px 10px;
    border-radius: 4px;
}

** It seems like you have actually applied background-color instead of border-color, remove that as well.

Let us know how it goes.

Thanks

Joao

[karolinevindParticipant]

Thank you for your help!
It worked out perfectly

[Rue NelModerator]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts