SKT ACTOR — CSS Change for Menu

[Casara Clark]

I’m working here at this site: https://casaraclark.com/actor/writer/standup/

I would like to change all the elements with #65d3bb color to #0000cc.

I did what I could in the Customize section of the site. I think I need custom CSS for the rest, specifically:
– the hover over for the menu items
– the active menu page text
– background for appointment-btn
– text color for hover over of appointment-btn
– all of this for mobile as well…
– the color of the hamburger icon on mobile
– the color of the menu header on mobile

Thank you!
Casara

[Sonl Sinha]

Hi,

– the hover over for the menu items
– the active menu page text
– background for appointment-btn
– text color for hover over of appointment-btn

Ans: Kindly go to Appearance >> Customize >> Header >> Header >> and change it there.

See screenshot link below:
imgur.com/a/HFpfAoI

– the color of the hamburger icon on mobile
– the color of the menu header on mobile

Ans: Kindly go to Appearance >> Customize >> Header >> Header >> and change it there.

See screenshot link below:
imgur.com/a/uTtgYFD

Regards,
Chris

[Casara Clark]

Oh, thank you so much! I’m sorry I missed that.

For the Menu Active Text & Border Color …

Is there a way to separate out the appointment-btn class?

I’m using anchor links in my menu which means almost ALL the menu items are an active page … (except for the appointment-btn menu item), so I think it’ll be cleaner to just make the active menu text white — the same as the regular menu text.

But when I change them to white, the appointment-btn is changing too: https://casaraclark.com/actor/writer/standup/wp-content/uploads/2021/01/oh-no-appt-button.jpeg

… I guess the appointment-btn border/background AND hover text are both linked to the active menu text color? …

Is there custom css I can add that’ll let me separate them?

IN SUMMARY, I would like to:
(1) make the active menu text white
(2) let the appointment-btn class keep its regular white text and blue (#0000cc) border and fill, which’ll then switch on the hover to blue (#0000cc) text and white border and fill.

Right now, (2) is only happening for me, if I sacrifice (1) and make the active menu text #0000cc.

Thank you!
Casara

[Sonl Sinha]

Hi,

Kindly use this CSS:

#topmenu ul li.appointment-btn a {
    background-color: #0000cc !important;
    color: #fff !important;
}

#topmenu ul li.appointment-btn a:hover {
    color: #0000cc !important;
    background: #fff !important;
}

Regards,
Chris

[Casara Clark]

Worked perfectly. Thank you!
Casara

[Sonl Sinha]

🙂

[Author]

Posts