Jump to content

MOBILE: Change Hamburger menu to word "MENU"

Recommended Posts

Change to word "Menu"

button.Mobile-bar-menu {
    visibility: hidden;
}
button.Mobile-bar-menu:after {
    visibility: visible;
    content: "Menu";
    font-family: proxima-nova;
    color: #000;
    font-size: 20px;
}

Add word "Menu" beside icon

button.Mobile-bar-menu:before {
    content: "Menu";
    font-size: 20px;
    color: #000;
    position: absolute;
    right: 50px;
    top: 25px;
}

All code from here: https://beaverhero.com/moksha-squarespace/#Add_word_Menu_beside_Hamburger_Icon

@jaimee1570048593

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
24 minutes ago, tuanphan said:

Change to word "Menu"


button.Mobile-bar-menu {
    visibility: hidden;
}
button.Mobile-bar-menu:after {
    visibility: visible;
    content: "Menu";
    font-family: proxima-nova;
    color: #000;
    font-size: 20px;
}

Add word "Menu" beside icon


button.Mobile-bar-menu:before {
    content: "Menu";
    font-size: 20px;
    color: #000;
    position: absolute;
    right: 50px;
    top: 25px;
}

All code from here: https://beaverhero.com/moksha-squarespace/#Add_word_Menu_beside_Hamburger_Icon

@jaimee1570048593

You are the best!!! Thank you thank you thank you : )

Link to comment
36 minutes ago, DanFarmer said:

Hi @tuanphan and @jaimee1570048593 - did you add this code into the Custom CSS area? or did you add this into the Advanced Code Injection area?

Add to Home > Design > Custom CSS

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
  • 1 month later...
On 12/10/2019 at 11:51 AM, tuanphan said:
button.Mobile-bar-menu {
    visibility: hidden;
}
button.Mobile-bar-menu:after {
    visibility: visible;
    content: "Menu";
    font-family: proxima-nova;
    color: #000;
    font-size: 20px;
}

@tuanphanThis works great. I'm curious if this could be manipulated to have the index page "MENU" font color as white and then black for all other pages?

Edited by SouthernSunEvents
Link to comment
2 hours ago, SouthernSunEvents said:

@tuanphanThis works great. I'm curious if this could be manipulated to have the index page "MENU" font color as white and then black for all other pages?

Can you share your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 7/21/2021 at 6:47 AM, SouthernSunEvents said:

Gah, sorry! Also curious how to get my nav bar to stick at the top for mobile/tablet. I'm tried so many different variations of code but nothing seems to be working. 

http://www.southernsunevents.com

PW: sse2020

It looks like you solved menu icon to word menu + sticky mobile header?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...
On 6/10/2021 at 1:31 AM, tuanphan said:

Each template needs a different code. Can you share link to your site?

Hey Tuanphan,

 

I'm just trying to find if there is a way I can either switch the hamburger to something clearly a menu (for folks who don't recognise the hamburger icon), or add menu next to it as suggested by the original poster. My accountant phoned me today because he thought my website was only one page! he never found the menu. So, in case there are others like him, I need to improve this! I am using the FULTON template. Mt site is www.theancoatsbagcompany.com

Is there any chance you could advise how two modify the code, or help me know where to ask? Thanks.

Link to comment
On 1/14/2022 at 4:32 AM, AncoatsJohn said:

Hey Tuanphan,

 

I'm just trying to find if there is a way I can either switch the hamburger to something clearly a menu (for folks who don't recognise the hamburger icon), or add menu next to it as suggested by the original poster. My accountant phoned me today because he thought my website was only one page! he never found the menu. So, in case there are others like him, I need to improve this! I am using the FULTON template. Mt site is www.theancoatsbagcompany.com

Is there any chance you could advise how two modify the code, or help me know where to ask? Thanks.

Add to Design > Custom CSS

/* Add menu text */
.mobile-nav-toggle-label:before {
    content: "Menu";
    position: relative;
    right: -25px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 2/23/2022 at 7:39 PM, Seanth said:

Hi @tuanphan

I've tried all the codes above and none works for me. I understand that the code varies depending on the current design of the page. Could you please help? Since I forced burger menu in desktop mode, I need to have  ""MENU" next to the Burger icon so badly.

Here's my site URL https://www.tma-mdpartner.com 

Thank you.

image.thumb.png.e82f77936dd7457169103f2dc5b2f5e4.png

Add this CSS

.burger-inner:before {
    content: "Menu";
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
On 2/26/2022 at 8:11 PM, tuanphan said:

Add this CSS

.burger-inner:before {
    content: "Menu";
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

 

Hi Tuanphan, 

I've been working on this in the Bedford template and I cannot get the CSS code I am using to change the hamburger icon to the word "menu".  I did notice in the site styles, that there is no mobile options anywhere. Do I need to put the code in the Advanced section in the Code Injection area?

I have done it on other sites I have built, but this one... grrr! lol 

Here is the URL:  www.imaginaryroadstudios.com 

Thank you kindly,

Kori 

Edited by KoriLinae

There be no techory around here my friend... 

Link to comment
7 hours ago, KoriLinae said:

Hi Tuanphan, 

I've been working on this in the Bedford template and I cannot get the CSS code I am using to change the hamburger icon to the word "menu".  I did notice in the site styles, that there is no mobile options anywhere. Do I need to put the code in the Advanced section in the Code Injection area?

I have done it on other sites I have built, but this one... grrr! lol 

Here is the URL:  www.imaginaryroadstudios.com 

Thank you kindly,

Kori 

Use this code

.mobile-nav-toggle {
    visibility: hidden;
}
.mobile-nav-toggle:before {
    visibility: visible;
    content: "Menu";
    position: relative;
    left: -20px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
  • 2 weeks later...
  • 2 months later...

 

I'm trying to work out how to solve this issue. Does anyone know how?

Thanks in advance

Buttons do not have an accessible name 

 
div.header-inner > div.header-display-mobile > div.header-burger > button.header-burger-btn
<button class="header-burger-btn burger" data-test="header-burger"> 

Screenshot 2024-03-21 at 12.22.07.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.