How to Change Hamburger Menu Color & Dropdown color on mobile in Zelle

In case the color of the Hamburger Menu has doesn't fit with the rest of the website design, you can make those changes with some simple custom code. You need to go to Appearance->Customize->Additional CSS and add the following:

.navbar-toggle.collapsed {
    background-color: #000 !important;
}

In order to change the Hamburger menu color on hover and click add the following CSS code:

.navbar-inverse .navbar-toggle, .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus{
    background-color: #000 !important;
}

To change the drop down icon color, go to the same Additional CSS area and add the following:

The result will be visible only on mobile devices, due to the fact that the hamburger menu is available for mobile devices.

.dropdownmenu.dropdown-toggle{
background: url(http://yourwebsite.com/wp-content/themes/zerif-pro/images/menu-icon.png) center center no-repeat #000 !important;
}

Replace yourwebsite.com with your website URL and #fff to the color hex code of your choice, you could find color codes for the color of your choice here: http://www.hexcolortool.com/

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us