SKT ACTOR — CSS Change for Menu

Home Forums All Other Themes SKT ACTOR — CSS Change for Menu

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #172982
    Casara ClarkCasara Clark
    Participant
    • Topics: 27
    • Replies: 41
    • Total: 68
    Member since: April 24, 2020

    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

    #173027
    Forum ModeratorForum Moderator
    Participant
    • Topics: 0
    • Replies: 26671
    • Total: 26671
    Member since: August 16, 2013

    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

    #173051
    Casara ClarkCasara Clark
    Participant
    • Topics: 27
    • Replies: 41
    • Total: 68
    Member since: April 24, 2020

    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

    #173079
    Forum ModeratorForum Moderator
    Participant
    • Topics: 0
    • Replies: 26671
    • Total: 26671
    Member since: August 16, 2013

    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

    #173103
    Casara ClarkCasara Clark
    Participant
    • Topics: 27
    • Replies: 41
    • Total: 68
    Member since: April 24, 2020

    Worked perfectly. Thank you!
    Casara

    #173186
    Forum ModeratorForum Moderator
    Participant
    • Topics: 0
    • Replies: 26671
    • Total: 26671
    Member since: August 16, 2013

    🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.