Change Hamburger Menu Icon on Mobile to word "MENU" - Publisher Theme

[kritikozzz]

Hi!

I am looking for a code for my website www.aurabyangelo.com (PUBLISHER THEME)  to turn the Hamburger menu icon on MOBILE (three lines) to the word MENU.

Thank you! 

-A 

[suyash1]

@kritikozzz - add this css to the very end of your base.css file and check

.header__icon--menu:before {content: "Menu" !important; color: #000 !important; position: inherit !important;}

.header__icon--menu .icon {display: none;}

[kritikozzz]

Hi thank you! The code worked however the word MENU is not centered with the search and cart icons on the right. Also, when I click on MENU it gets highlighted with a gray box. 

 

[suyash1]

@kritikozzz - add background color and margin too, so css becomes

.header__icon--menu:before {content: "Menu" !important; color: #000 !important; position: inherit !important; background-color: #fff !important; margin-top: 15px;}

[kritikozzz]

Sorry something is funky now. I made my header transparent with another code.

I want the word MENU to be aligned with the icons on the right, and when you click it I don't mind it being transparent. I just did not want the gray background behind MENU. 

[suyash1]

@kritikozzz - remove that last margin line in above css and check

[kritikozzz]

Do you mind checking it on mobile? I think we are close. It is not centered with the icons on the right. I am also noticing a gray background once you click MENU that appears quickly. Seems buggy? 

[suyash1]

@kritikozzz - that margin part was to take menu down a bit to align with right icons, but its a glitch, 

after you made the header transparent,  I can not see the grey part

[kritikozzz]

It happens quickly when you click on MENU. I managed to screen shot it as it appeared.  

[suyash1]

@kritikozzz - clear all the cache and check, it is not happening on my screen

[kritikozzz]

I fixed the white background to transparency as i wanted, but when i click on MENU the word shifts/glitches up and down a little. Please review now on mobile. 

[suyash1]

@kritikozzz - try this css to take word menu dow

.header__icon--menu {position: initial;    margin-top: 15px;}

[kritikozzz]

Do you have a code to change the cart icon on mobile to the word CART? I’d love if there can be a number (0) next to CART (1) with the number of items in cart.