controlling the color of the menu toggle button

  • Resolved ac1643

    (@ac1643)


    10 years ago

    Hi

    I have a question which I believe is a css issue, which I am unable to resolve.

    the toggle-button is:

    blue before any interaction
    orange on hover
    orange when active
    blue when visited.

    What happens is when the drop-down menu is turned off the button stays orange, its active state, rather than return to blue. However when the screen is clicked anywhere it does then return to blue.

    I thought making the visited property blue would sort this, however it is having no effect.

    Do you know how I can ensure that the button returns to the original un-toggled color after the menu is turned off?

    Thanks

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

    (@vladff)

    Hello,

    This is your own code doing this ??

    You’ve set the :focus background to orange. So you click the button and it turns orange, then you click it again to hide and it turns orange again (from already being orange). It doesn’t work like an on/off switch.

    What you’re trying to do will work with just a bit of jQuery, like this:

    jQuery(function($) {
	$('.menu-toggle').click(function()
	{
		$('.menu-toggle').toggleClass('active-menu');
	});
});

    Remove the :focus and add a background color for the .active-menu class.

    Thread Starter ac1643

    (@ac1643)

    Hi thanks for this.

    I’ve never used jquery thus far (html + css only), so would you be able you tell me more specifically where I add the code you posted?

    Much appreciated

    vladff

    (@vladff)

    You can use this plugin, or you can add it in scripts.js if you’re able to load that file from a child theme.

    Thread Starter ac1643

    (@ac1643)

    Great thanks

    For now I may just remove the focus color setting in the css: this makes the button orange only when clicked, at all other times blue.

    However I’ll give the jquery a go as well to see if it works.

    Grateful for the help

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘controlling the color of the menu toggle button’ is closed to new replies.