• Resolved Art Bella

    (@artneyp)


    I changed my menu bar to blue, but it still shows up the corral/pink color on mobile. Trying to find a way to change the menu bar to be the same color.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn Presner

    (@zoonini)

    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?

    Thread Starter Art Bella

    (@artneyp)

    That worked! Thank you so much!

    Moderator Kathryn Presner

    (@zoonini)

    Wonderful – you’re welcome!

    Thread Starter Art Bella

    (@artneyp)

    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.

    Moderator Kathryn Presner

    (@zoonini)

    Hi there – I took at look at your site – http://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?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu on Mobile Different Color’ is closed to new replies.