Coloured frame around 1 navbar menu item

I would like to put a thin line frame around 1 item in my navbar (“Book Us” on this site: http://luciterradance.com/).
Any advice on how to go about doing this?

Many thanks!

Gillian

Hello Gillian,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#menu-item-88 {
    border: 1px solid black;
    border-radius: 2px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thanks so much. I have copied and pasted that piece of code into my Custom CSS plugin and see no changes.
How does it know which menu item to apply the border to, and what colour?

Thanks for your help!

Gillian

Apologies - the border is there, I just needed to clear my cache.
How do I make it a custom color other than black, though?

Many thanks!

Hello Gillian,

You can change that border color by replacing black in the code above with any other color or color code.

Please let me know if you need more help.

Kind Regards, Roman.

Hi Roman,

The code works, but when shrink to mobile size, it failed.

Any way to solve this?

My hope is to cancel the border when in mobile menu mode, and replace its style just the background and font color.

Thanks!

Hello @zxrjay,

Please try to use this CSS code instead of previous:

#mainnav #menu-item-88 {
    border: 2px solid #eaab2b;
    border-radius: 2px;
}

#mainnav-mobi #menu-item-88 a {
    color: #eaab2b !important;
    background-color: rgba(255, 255, 255, 0.1);
}

But I guess that you will have to replace menu item ID.

Kind Regards, Roman.