Create a highlighted or CTA button in the menu

Illdy
1

Hello,

I want one of my menu links to be a different coloured button that also appears different on hover. Image attached with an example. I’m trying to get the look of the CONTACT button in the example image.

How do I achieve this?

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile: In order to check your question i need to see your live website, please provide url and i will take a look

3

hello, my website url is boothified.ca please explain how I can achieve this look for the BOOK NOW menu link. thanks.

4

hey there

Please add this CSS in appearance - customize - additional CSS

li#menu-item-2268 a:hover {
color: white !important;
}

li#menu-item-2268 a {
background: red;
padding: 5px 10px;
border-radius: 3px;
}

Thanks!
Colorlib Support Team

5

Hello,

I have made changes to my site and now want a new link to be the CTA. how do I do this? Its the last link but not sure how to retrieve menu item as its a custom link

6

hi Sarafina

you have to do this from the appearance > menu and change the link in the custom menu :slight_smile:
maybe not clearly understand your question?

7

My site is www.boothified.ca. Right now the css for “Book Now” I need to put on “Get Boothified” link. How do I do this? What css do I need to achieve this?

8

hi

First of all, this is better question :smiley:

this is your css:

li#menu-item-2268 a:hover,
li#menu-item-2467 a:hover {
color: white !important;
}

li#menu-item-2268 a,
li#menu-item-2467 a {
background: red;
padding: 5px 10px;
border-radius: 3px;
}

9

Lol thanks that worked perfectly.

How about the mobile menu? How would I change the background for that item as well?

10

hi

For mobile we need to add this code:

.menu-item-2467 a {
background: rebeccapurple;
color: white !important;
}

p.s. don’t forget to change color codes :slight_smile: