Menu colours on mobile

To change your mobile colours use the @media class for the screen sizes you want, so it would look something like this:

@media only screen and (max-width: 768px) {
  .whatever-class-you-want-to-change {
    color: #ea5f40;
}

You could also try killing a few birds with one stone with a min-max like this.

@media only screen and (max-width: 1024px) and (min-width: 400px)

Common Page Widths

320px.
480px.
600px.
768px.
900px.
1024px.
1200px.

Bam Bam

• This reply was modified 4 years, 5 months ago by Bam Bam.
• This reply was modified 4 years, 5 months ago by Bam Bam.

You may have to add !important to your CSS to get it to take effect.

Bam Bam

@media only screen and (max-width: 1024px) and (min-width: 400px) {
color: #ea5f40;
}

like this?

No, you need to add the class you are trying to target, it’s the same as you would change any class, you are just wrapping it in the @media query.

@media only screen and (max-width: 1024px) and (min-width: 400px) {
  .some-class {
    color: #ea5f40 !important;
  }
}

• This reply was modified 4 years, 5 months ago by Bam Bam.
• This reply was modified 4 years, 5 months ago by Bam Bam.
• This reply was modified 4 years, 5 months ago by Bam Bam.

Please bear with me, not a programer ??

Like this?

@media only screen and (max-width: 1024px) and (min-width: 400px) {
.button.menu-toggle {
color: #ea5f40 !important;
}
}
button.menu-toggle:hover {
color: #535353 !important;
}
}

Pretty much, does it work for you ??

Just looking at it in the element inspector the menu still turns Green when I hover on it and the active state is also green.

You can target Active the same way as Hover just use :active instead of :hover, but separately of course.

@media only screen and (max-width: 1024px) and (min-width: 400px) {
.button.menu-toggle {
color: #ea5f40 !important;
}
button.menu-toggle:hover {
color: #535353 !important;
}

tried this and is still purple and green on my iPhone 6s

@media only screen and (max-width: 1024px) and (min-width: 400px) {
.button.menu-toggle {
color: #ea5f40 !important;
}
button.menu-toggle:hover {
color: #535353 !important;
}
button.menu-toggle:active {
color: #535353 !important;
}

still not doing it on my iPhone

It is truly one of the things I hate so much about WordPress, it can at times be very difficult to find the class you need to target at times.

My apologies though, got confused by talking about mobile, remove the @media, it’s not needed as it only shows up on mobiles anyway.

Use this, it should work

button.menu-toggle {
   color: #ea5f40 !important;
   border-color: #ea5f40 !important;
}

button.menu-toggle:hover {
   color: #535353 !important;
   border-color: #535353 !important;
}

button.menu-toggle:active {
   color: #535353 !important;
   border-color: #535353 !important;
}

• This reply was modified 4 years, 5 months ago by Bam Bam.

tried, but still same purple/lime green on my mobile screen….

super annoying

Ok, I think I have it, remove the button off the front of the class

.menu-toggle {
color: #ea5f40 !important;
border-color: #ea5f40 !important;
}
.menu-toggle:hover {
color: #535353 !important;
border-color: #535353 !important;
}
.menu-toggle:active {
color: #535353 !important;
border-color: #535353 !important;
}

still same purple/lime
annoying

thanks a lot though for trying to help out, much much appreciated

I am not seeing the changes when I inspect the element, you are saving / publishing after making the changes aren’t you, because when I make the temporary changes in the Element Inspector I get the results that I am expecting.