Menu on Mobile Different Color

You probably missed some instances of the pink colour in the styles that target the menu on smaller screen sizes.

You’ll need to find all instances of pink in the original stylesheet and override them in your child theme or stylesheet.

This colour scheme replaces all the original pink with turquoise – you can replace it with your own blue if you’d like:

.nav-menu > li > a:after {
        color: rgba(0, 0, 0, 0.3);
    }
.main-navigation a, .social-links ul a:before { color: #494949;}
.menu-toggle, .menu-toggle:hover, .menu-toggle:focus { color: #494949;}
.main-navigation.toggled ul ul, .main-navigation.toggled ul ul a { color: #494949;}
.site-info a { color: #FFFFFF;}
.main-navigation a:hover, .main-navigation ul > :hover > a, .main-navigation ul > .focus > a { color: #494949;}
.main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a { color: #494949;}
.main-navigation li.current_page_item > a .sub-menu li a, .main-navigation li.current-menu-item > a .sub-menu li a, .main-navigation ul ul li.current_page_item > a, .main-navigation ul ul li.current-menu-item > a { color: #4F4F4F;}
body { background-color: #f0f0f0;}
.main-navigation, button { background-color: #74ccd1;}
a, .entry-title a:hover, .comment-meta a, .jetpack-testimonial .entry-title { color: #2B797C;}
.widget_flickr #flickr_badge_uber_wrapper td a:last-child, .widget-area .milestone-countdown .difference { color: #2B797C;}
.main-navigation ul ul a:hover, .main-navigation ul ul > li.focus > a { color: #2B797C;}
input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span { background-color: #2B797C;}
input[type="text"]:focus,
            input[type="email"]:focus,
            input[type="password"]:focus,
            input[type="search"]:focus,
            input[type="url"]:focus,
            textarea:focus { border-color: #2B797C;}
.social-links ul a:before, .footer-widget-area button { background-color: #74CCD1;}
.site-info a:hover { color: #74CCD1;}
.footer-widget-area a:hover { color: #297679;}

Let me know how it goes. If you need further help, could you provide a link to your site so we can have a look directly and see exactly what CSS still needs tweaking?

That worked! Thank you so much!

Wonderful – you’re welcome!

I am desperately trying to change the color of my navigation to plain white for mobile as well as my site. Can you help? It was turquoise and I went in to change all of the instances but it reverts back to pink.

Hi there – I took at look at your site – https://www.myprettybrownfit.com/ – at a small screen size, but I’m not seeing anything at all in pink, just turquoise.

Did you get this sorted out already?