• Resolved Job

    (@angryjob)


    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)
  • Thread Starter Job

    (@angryjob)

    While I was in the right direction, I just messed aroud a bit and came to the solution.

    To know which part the theme picked in de style.css I right-clicked and inspected element. This triggered or toggled the menu icon.

    If you want to change the color of the menu icon on mobile:

    STANDARD:

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
      background-color: transparent;
    }

    ADD ” .navbar-default .navbar-toggle:,”

    .navbar-default .navbar-toggle:,
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
      background-color: transparent;
    }

    And change ‘transparent’ to the colour you want, lets say white:

    .navbar-default .navbar-toggle,
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
      background-color: #FFFFFF;
    }
Viewing 1 replies (of 1 total)
  • The topic ‘The menu icon on the mobile menu’ is closed to new replies.