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.
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?
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.