nsitedesigns
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/
http://681.3b0.myftpupload.com/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
F12 is my best friend <3
ASKER
f12 is my volume! : )
ASKER
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";
with content:"Menu"; and the word menu should appear next to hamburger but now nothing shows!
This is missing entirely:
#responsive-menu-icon::bef ore {
-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";
#responsive-menu-icon::bef
-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";
ASKER
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
https://screencast.com/t/5k1nH02f1
according to that, the display:none; is still in there.
ASKER
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
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::bef ore {
-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::aft er {
-webkit-font-smoothing: antialiased;
color: #907860;
content: "\f333";
font: normal 20px/1 'dashicons';
line-height: 1;
margin: 0 auto;
speak: none;
text-transform: none;
#responsive-menu-icon::bef
-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::aft
-webkit-font-smoothing: antialiased;
color: #907860;
content: "\f333";
font: normal 20px/1 'dashicons';
line-height: 1;
margin: 0 auto;
speak: none;
text-transform: none;
ASKER
Thank you!
ASKER