Change the background of certain menu items?

Illdy
#1

Hey all, I was hoping somebody would be able to help me. I’d like to add background color/shape to one of my menu items, similar to the example in the image I’ve attached below.

Is that at all possible to do in the Additional CSS section? I haven’t been able to figure it out.

#2

Hey there

I can help you with this, please provide link to this page and i will generate custom css for you

#3

Hm, I think I figured most of it out. Here’s the code I used, after I enabled CSS classes in the Menu page:

/CTA MENU BUTTON/

@media only screen and ( min-width: 981px ) {
.callout-button a {
background-color: #28aee1;
padding: 15px 25px !important;
border-radius: 25px;
text-transform: uppercase;
color: #fff !important;
box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.1);
}

.et-fixed-header #top-menu .cta_menu a {
color: #fff !important;
}}

So here’s my problem now: that specific code just gives me a solid blue (#28aee1) field, because for whatever reason, my default menu text isn’t changing to white (#fff) the way it should be. (The menu text is all #28aee1). So I’ve had to make a janky fix, wherein I just change the background-color field to #DCDCDC.

Any idea how to create a button with white text on a #28aee1 field?

(Website is www.therecruitbot.com)

#4

Good morning

Try this code:

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

but please note, if this code is not working its overridden by the higher level of the css code

#5

Thanks for you help! It seems like the CSS couldn’t get overwritten, but I appreciate your help nonetheless!

One last thing before I go: I’ve recently changed my header to be sticky, but on my secondary pages there’s a weird miscolored bar right underneat it, before I go scrolling. Here’s a link:

Is there any way you can help me remove that purple stripe? I’m kind of at a loss for how to do it.

Again: thanks!

#6

Thank you :slight_smile:

Please try this css:

#header .bottom-header {
padding-top: 0px;
padding-bottom: 0px;
}

#7

Hey, that worked! Thanks so much :slight_smile:

#8

You are welcome :slight_smile:

If you’re happy with our service, don’t forget to rate us: [Illdy] Reviews | WordPress.org