Changing hover colour of widget expander and dynamic menu

  • Hi there,

    I’ve been tweaking the Illustratr template and have managed to change various formatting options through Additional CSS, but can’t work out how to:

    1) change the hover colour of the “+” triangle that expands the footer section
    2) change the hover colour of the menu button that expands the navigation links at the top of the page on mobile

    Anyone able to help?

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi there,

    You did not mention it, but what is the color you are trying to change those to? i.e. what color should I see if I hover over those?

    have you tried changing the accent color in your theme settings? That should address both of the hover colors you are mentioning. You can see what I see at this link: https://d.pr/i/42zeZL

    Thread Starter thecorrector

    (@thecorrector)

    I assumed that’s where I’d make the change, but my color settings are restricted to changing the background (this is what I see – https://ibb.co/b27ghDM)

    The color I want is #f8d210 – I’ve managed to alter the hover colour of the footer expand toggle but in doing so, the triangle has changed to a square. Similarly, I’ve been able to alter the colour of the central element of the menu toggle, but there’s still an outline on either side in the default theme red that I can’t get rid of.

    Hi again,

    Oops, apologies for that. My screenshot is taken on the demo site (on WordPress.com) and self-hosted sites do not have the same color options.

    The color I want is #f8d210 – I’ve managed to alter the hover colour of the footer expand toggle but in doing so, the triangle has changed to a square

    That is because the wrong element is being targeted, which is understandable since the CSS you are trying to target is a border color (not background color) which adds to the confusion here. You mentioned you only want to change the hover color, yes? If so please remove the CSS you tried for that section, and use this CSS instead:

    #secondary.hover:after {
	border-bottom-color: #f8d210;
}

    Similarly, I’ve been able to alter the colour of the central element of the menu toggle, but there’s still an outline on either side in the default theme red that I can’t get rid of.

    I’m a bit confused by this. I do not see any “outline” colors on the mobile menu toggle when I visit. You can see what I see at this link: https://d.pr/i/suR2OB

    Do you see something different from what I can see? If so can you take a screenshot so we can see that as well? Thanks for the additional info!

    Thread Starter thecorrector

    (@thecorrector)

    That replacement CSS worked, thank you very much indeed.

    The mobile menu toggle issue ended up being a server delay, meaning I couldn’t see the changes I’d made – the menu is now displaying as I want it to.

    Thanks very much again for your assistance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing hover colour of widget expander and dynamic menu’ is closed to new replies.