Help changing color of mobile menu button on hover

Support
#1

I added the following code to try and change the background color of my menu button, and it worked for the collapsed button (transparent), but not for hover nor expanded state (349D92). What am I missing?

a.x-btn-navbar.collapsed {
background: transparent; !important;
box-shadow: none;
}

a.x-btn-navbar.collapsed:hover {
background-color: 349D92; !important;
box-shadow: none;
}

a.x-btn-navbar {
background-color: 349D92; !important;
box-shadow: none;
}

#2

Hello @teleomorph,

Thanks for writing in!

Please add following CSS under X > Launch > Options > CSS:

@media only screen and (max-width: 500px) {a.x-btn-navbar.collapsed:hover {background-color: #ddd;} .x-btn-navbar {background-color: #ddd;}}

Let us know how it goes.

Thanks.

#3

Worked. Thank you!!

#4

oh wait, i still need the code for color change of the button while expanded.

What you gave me worked for hover, but not for ‘selected’/expanded state.

#5

Hi There,

Please update the given CSS code to this:

@media only screen and (max-width: 979px) {
		a.x-btn-navbar.collapsed:hover,
		a.x-btn-navbar.collapsed,
		a.x-btn-navbar {
			background-color: #349D92;
			box-shadow: none;
		}
}

Cheers!

1 Like