The menu icon on the mobile menu
-
Dear devs,
Thanks for another great theme, first of all, I always remove footer credits to give credit to WordPress and the theme on an about page, but my site is WIP.
I’m using the Unite theme on demo01.avobyte.nl but the menu icon isn’t very good visible, I looked around in the style.css and I got to change the hover color. When I hover with my mouse it now gets white. But I want this all the time, and not only when I’m hovering on it.
How can I change this?
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; }
I changed to:
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #FFFFFF; }
The navigation part in style.css:
/* =Navigation ----------------------------------------------- */ .site-main [class*="navigation"] a, .more-link { border: 1px solid #DDD; padding: 6px 12px; border-radius: 4px; display: block; } .site-main [class*="navigation"] a:hover, .more-link:hover { color: #fff; background: #54397E; text-decoration: none; } .more-link { float: right; margin: 10px 0; } .site-main [class*="navigation"] { margin: 0 0 1.5em; overflow: hidden; } [class*="navigation"] .nav-previous { float: left; } [class*="navigation"] .nav-next { float: right; text-align: right; } .navbar.navbar-default { background-color: #54397E; font-weight: 200; } .navbar-default .navbar-nav > li > a { color: #fff; border-right: 1px solid rgba(0,0,0,.2); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.10); } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { border-right: 1px solid rgba(0,0,0,.2); border-left: none; } .navbar { border-radius: 0; } .navbar-default { border: none; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; background-color: rgba(0, 0, 0, 0.1); } .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #fff; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { border-left: 1px solid rgba(0, 0, 0, 0.1); } .dropdown-menu > li > a { padding: 18px 20px; color: #fff; } .dropdown-menu, .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: #54397E; border: none; } .dropdown-menu .divider { background-color: rgba(0, 0, 0, 0.1); } .navbar-nav > li > .dropdown-menu { padding: 0; } .navbar-nav > li > a { padding-top: 18px; padding-bottom: 18px; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #FFFFFF; }
Thanks a lot
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- The topic ‘The menu icon on the mobile menu’ is closed to new replies.