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

kritikozzz
Excursionist
36 0 4

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 

 

 

Replies 12 (12)

suyash1
Shopify Partner
8962 1113 1460

@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;}

 

suyash1_0-1698977319632.png

 

suyash1_1-1698977344186.png

 

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
kritikozzz
Excursionist
36 0 4

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. 

 

IMG_1845.PNG

suyash1
Shopify Partner
8962 1113 1460

@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;}

  

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
kritikozzz
Excursionist
36 0 4

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. 

IMG_1846.PNG

suyash1
Shopify Partner
8962 1113 1460

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
kritikozzz
Excursionist
36 0 4

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
Shopify Partner
8962 1113 1460

@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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
kritikozzz
Excursionist
36 0 4

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

IMG_1850.PNG

suyash1
Shopify Partner
8962 1113 1460

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
kritikozzz
Excursionist
36 0 4

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
Shopify Partner
8962 1113 1460

@kritikozzz - try this css to take word menu dow

 

.header__icon--menu {position: initial;    margin-top: 15px;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
kritikozzz
Excursionist
36 0 4

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.