Link to home
Start Free TrialLog in
Avatar of nsitedesigns
nsitedesignsFlag for United States of America

asked on

change hamburger icon color

How do I change hamburger icon color?  Right now it is set to white and disappears because header is white.
http://681.3b0.myftpupload.com/
ASKER CERTIFIED SOLUTION
Avatar of Nancy Rindone
Nancy Rindone
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of nsitedesigns

ASKER

you are on a roll!
F12 is my best friend <3
f12 is my volume!  : )
Darn.  I did something and now the icon doesn't display again.  I copied your code and put back in css.  Any idea why it wont' display.  Plus I read that I can replace
content:"\f333"; 

Open in new window

with content:"Menu"; and the word menu should appear next to hamburger but now nothing shows!
This is missing entirely:

#responsive-menu-icon::before {
    -webkit-font-smoothing: antialiased;
   color: #fff;  /* change this to whatever color you need, not white */
    content: "\f333";
    font: normal 20px/1 'dashicons';
    line-height: 1;
    margin: 0 auto;
    speak: none;
    text-transform: none;
}

And, this is repeated (in your code twice):

#responsive-menu-icon {
    cursor: pointer;
    display: none;
    text-align: center;
}


If you replace \f333, you will not see the icon at all. Try: content: "Menu \f333";
I am not sure what you were looking at.  I DO have the info above and the second part isn't repeated.  Here is screen shot from Simple custom CSS plugin:

https://screencast.com/t/5k1nH02f1
according to that, the display:none; is still in there.
Sorry, I thought that was supposed to be there. I removed it and now the word Menu does display along with the hamburger icon.  Would it be possible to line up the word Menu with the bottom of the hamburger icon? Or, should I open up another question?

https://screencast.com/t/IxyyIMgQUhsE
To achieve this, I split the content items up into before and after, and played with the line height of the word Menu:

#responsive-menu-icon::before {
    -webkit-font-smoothing: antialiased;
    color: #907860;
   content: "Menu ";
    font: normal 20px/1 'dashicons';
   line-height: 15px; /*adjusted this */
    margin: 0;
    speak: none;
    text-transform: none;
   vertical-align: top;  /* added this */

#responsive-menu-icon::after {
    -webkit-font-smoothing: antialiased;
    color: #907860;
    content: "\f333";
    font: normal 20px/1 'dashicons';
    line-height: 1;
    margin: 0 auto;
    speak: none;
    text-transform: none;
Thank you!