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
@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;}
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.
@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;}
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.
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.
@kritikozzz - remove that last margin line in above css and check
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?
@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 - try this css to take word menu dow
.header__icon--menu {position: initial; margin-top: 15px;}
@kritikozzz - clear all the cache and check, it is not happening on my screen
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.