Menu colours on mobile

  • macarie

    (@macarie)


    5 years, 11 months ago

    Hi there,

    Can anyone help with menu colour on mobile?

    I have managed to change coding following all your previous instructions to change default colours from purple and lime green to my colours which are #ea5f40 as primary and #535353 as hoovering one on PC.

    It is not working on mobile though. On mobile, there is still the default purple with lime green.

    Can anyone help? Cheers
    Oana

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

Viewing 15 replies - 1 through 15 (of 25 total)
1 2
  • Bam Bam

    (@bam-bam)

    5 years, 11 months ago

    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 5 years, 11 months ago by Bam Bam.
    • This reply was modified 5 years, 11 months ago by Bam Bam.
    Bam Bam

    (@bam-bam)

    5 years, 11 months ago

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

    Bam Bam

    Thread Starter macarie

    (@macarie)

    5 years, 11 months ago

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

    like this?

    Bam Bam

    (@bam-bam)

    5 years, 11 months ago

    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 5 years, 11 months ago by Bam Bam.
    • This reply was modified 5 years, 11 months ago by Bam Bam.
    • This reply was modified 5 years, 11 months ago by Bam Bam.
    Thread Starter macarie

    (@macarie)

    5 years, 11 months ago

    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;
    }
    }

    Bam Bam

    (@bam-bam)

    5 years, 11 months ago

    Pretty much, does it work for you ??

    Bam Bam

    (@bam-bam)

    5 years, 11 months ago

    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.

    Thread Starter macarie

    (@macarie)

    5 years, 11 months ago

    @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

    Thread Starter macarie

    (@macarie)

    5 years, 11 months ago

    @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

    Bam Bam

    (@bam-bam)

    5 years, 11 months ago

    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 5 years, 11 months ago by Bam Bam.
    Thread Starter macarie

    (@macarie)

    5 years, 11 months ago

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

    super annoying

    Bam Bam

    (@bam-bam)

    5 years, 11 months ago

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

    Thread Starter macarie

    (@macarie)

    5 years, 11 months ago

    .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

    Thread Starter macarie

    (@macarie)

    5 years, 11 months ago

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

    Bam Bam

    (@bam-bam)

    5 years, 11 months ago

    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.

Viewing 15 replies - 1 through 15 (of 25 total)
1 2

The topic ‘Menu colours on mobile’ is closed to new replies.