Change Sub-menu Font Color on Mobile

  • Resolved zander919

    (@zander919)


    8 years, 12 months ago

    Hey, I am running into issues with the mobile version of my wordpress site. On my regular website, I have customized (using custom css) my menu/navigation bar so that the menu and the drop down menu under each menu heading have particular background colors and font colors. On the regular version of my website, the menu bar is blue and the font is white, while the drop down menus are white with blue font. However, the mobile site forces all the menus to be blue, and therefore my submenu text is not visible. Im wondering how to fix this. Ive tried some different css inputs as well as looked into disabling the mobile site altogether. Any help would be appreciated! Thank you

    jamiedew.com is my website

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

  • You can add this to your custom CSS:

    @media screen and (max-width: 779px) {

    .main-navigation h1 {
        color: #fff;
    }

    .main-navigation ul ul li a {
        color: #fff
    }

}

    The @media max-width: 779px line indicates that the styles within that block will only apply from 0px to 779px.

    The .main-navigation h1 is for the responsive menu text and its burger icon (the 3 lines stacking on top of each other).

    And of course, the last one is for your sub-menu, but you know that since that’s your code right there; I just added it to the media queries with a max-width of 779px.

    Thread Starter zander919

    (@zander919)

    Thank you very much, this fixed it!

    @ThePixleMe

    Great post! I used the code to change my handheld menu except it is not changing the all if it. It’s not changing the menu itself just the drop downs. Can you let me know where I’m going wrong or what line I’m missing?

    @media screen and (max-width: 779px) {

    .main-navigation h1 {
    color: #f16236;
    }

    .main-navigation ul ul li a {
    color: #f16236
    }
    }

    my site is leisureinstalls.com

    Thank you!

    @leisureinstalls That’s because you’re using a different theme. The original poster was using Graphy theme; so the code I originally posted a year ago was tailored to that theme.

    You’re using Storefront theme; so the code will be different. I would suggest you post a new thread in Storefront theme’s forum; that way you’ll get codes tailored to Storefront theme.

    • This reply was modified 8 years, 1 month ago by ThePixelMe.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change Sub-menu Font Color on Mobile’ is closed to new replies.