Menu bar open in responsive view
-
Hi!
When my site (nanoanno.com) has the menu button open it is defaulting to the original dark orange color of the theme. It seems to only be doing this when on mobile (responsive view).
Is there a line of CSS I can add to adjust this color?
Here is all of the custom CSS I currently have in place:
.tagcloud a { border: 1px solid #eeeeee; color: #999999; display: inline-block; font-size: inherit !important; letter-spacing: 1px; margin: 0 7px 7px 0 !important; padding: 0 7px; text-transform: uppercase; } .tagcloud a:hover { border-color: #FFAC00; color: #FFAC00; } .main-navigation a { color: #999999; } .main-navigation a:hover { color: #FFAC00; } .current_page_item a, .current-menu-item a { color: #FFAC00; } .current_page_item a:hover, .current-menu-item a:hover { color: #E84B3D; } .entry-content a { color: #FFAC00; } .entry-content a:hover { color: #E84B3D; } .site-logo { max-height: 150px; } .site-header { padding: 0; } footer#colophon { color: #FFAC00; } footer#colophon a { color: #999999; } footer#colophon a:hover { color: #FFAC00; } .site { margin: 5px auto; } .hentry { margin: 0; padding: 0; } body.single-games .entry-meta { display: none; } .has-site-logo .site-title { max-width: 60%; vertical-align: middle; display: none; } button:hover, button:focus, button:active, input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active, input[type="reset"]:hover, input[type="reset"]:focus, input[type="reset"]:active, input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active { border-color: #FFAC00; color: #FFAC00; } .widget a { color: #999999; } .widget a:hover, .widget a:active, .widget a:focus { color: #FFAC00; } .entry-footer a:hover, .entry-meta a:hover, .portfolio-entry-meta a:hover { color: #FFAC00; } .site-main .post-navigation .nav-next a, .site-main .paging-navigation .nav-next a, .site-main .post-navigation .nav-previous a, .site-main .paging-navigation .nav-previous a { color: #FFAC00; } .site-main .post-navigation .nav-next a:hover, .site-main .paging-navigation .nav-next a:hover, .site-main .post-navigation .nav-previous a:hover, .site-main .paging-navigation .nav-previous a:hover { color: #E84B3D; } .site-branding { margin-bottom: 2px; } .has-site-logo .site { padding-top: 3px; } footer#colophon { color: #999999; } footer#colophon a { color: #999999; } footer#colophon a:hover { color: #FFAC00; } .main-navigation a { color: #999999; } .has-site-logo .main-navigation { padding-top: 80px; } h6 { color: #e0e0e0; } h6 a:link { text-decoration: none; color: #e0e0e0; } h6 a:visited { text-decoration: none; color: #e0e0e0; } h6 a:hover { text-decoration: none; color: #FFAC00; } h6 a:active { text-decoration: none; color: #FFAC00; } .social-links ul li a:hover { color: #E84B3D; } #colophon .social-links ul a:hover:before { background: #FFAC00; } .entry-title a:hover, .portfolio-entry-title a:hover { color: #FFAC00; } .main-navigation li:hover > a { color: #FFAC00; } .button { -webkit-border-radius: 2; -moz-border-radius: 2; border-radius: 2px; font-family: Arial; color: #FFAC00; padding: 12px 18px; border: solid #FFAC00 2px; text-decoration: none; } .button:hover { -webkit-border-radius: 2; -moz-border-radius: 2; border-radius: 2px; font-family: Arial; color: #e84b3d; padding: 12px 18px; border: solid #e84b3d 2px; text-decoration: none; } .logged-in-as a, .must-log-in a { color: #FFAC00; } .logged-in-as a:hover, .must-log-in a:hover { color: #E84B3D; } .more-link { -webkit-border-radius: 2; -moz-border-radius: 2; border-radius: 2px; font-family: Arial; color: #FFAC00; padding: 12px 18px; border: solid #FFAC00 2px; text-decoration: none; } .more-link:hover { -webkit-border-radius: 2; -moz-border-radius: 2; border-radius: 2px; font-family: Arial; color: #e84b3d; padding: 12px 18px; border: solid #e84b3d 2px; text-decoration: none; } .hentry { padding: 0 0 14px; margin: 0 0 14px; } .widget-title { color: #fff; background-image: url("http://nanoanno.com/wp-content/uploads/2015/09/purple-texture-sidebar-titles.jpg"); padding: 3px 0; text-align: center; } .widget { color: #999999; font-size: 15px; } h5 { color: #96c93d; font-weight: bold; }
Viewing 3 replies - 1 through 3 (of 3 total)
-
This should target the mobile menu:
.toggled .menu-toggle { border-color: #bb00bb; color: #bb00bb; }Replace the example purple with your shade of orange, or whatever other colour you prefer.
Worked like a charm. Thanks so much, Kathryn!
You’re very welcome!
Viewing 3 replies - 1 through 3 (of 3 total)
The topic ‘Menu bar open in responsive view’ is closed to new replies.
