Change menu to hamburger icon in Wells mobile

Anyone have CSS code to change the word Menu to the hamburger icon on mobile navigation? Thanks!

@caro426 Add to Home > Design > Custom CSS

div#mobileMenuLink a:before {
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
    visibility: visible;
}
#mobileMenuLink a {
    visibility: hidden;
}

Replace https...svg to icon you want.

Reference: https://beaverhero.com/wells-squarespace/#Change_Menu_to_Hamburger_Icon

Hi there! Thanks so much, but this bit of CSS doesn't seem to work, I've tried pasting it in and even updating the icon, but the menu button just disappears! 

2 hours ago, HeyMa said:

Hi there! Thanks so much, but this bit of CSS doesn't seem to work, I've tried pasting it in and even updating the icon, but the menu button just disappears! 

Can you share link to your site?

Hi Tuanphan,

I just tried your CSS code also and the same thing happened- the word menu just dissappears. Any updated fixes?

Thank you so much!!

On 9/15/2020 at 11:15 PM, mariadraws said:

Hi Tuanphan,

I just tried your CSS code also and the same thing happened- the word menu just dissappears. Any updated fixes?

Thank you so much!!

can you share site url? We can check easier.

On 9/18/2020 at 7:02 PM, tuanphan said:

can you share site url? We can check easier.

hi, the same for me – it disappeared 😞

On 11/20/2020 at 5:01 PM, brunhilda said:

hi, the same for me – it disappeared 😞

Can you share site url? We can check easier

Hello, sorry to bump an old thread but this doesn't work for me either. Is the path of the .svg correct?
grape-trumpet-ne43.squarespace.com

5 minutes ago, tfaurie said:

Hello, sorry to bump an old thread but this doesn't work for me either. Is the path of the .svg correct?
grape-trumpet-ne43.squarespace.com

Nevermind, there is a typo on the code above. For those wondering, this is the right code:
 

Hi @tuanphan.

My website is https://www.andyryanphotographer.com/

I had the custom CSS to change the menu to hamburger, but it seems this CSS is no longer working in the wells template.

div#mobileMenuLink a:before {
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
    visibility: visible;
}
#mobileMenuLink a {
    visibility: hidden;
}

See attached.

I've had to remove this for client functionality.

Additionally, just to note, I have custom CSS for my projects page so it operates similarly to my galleries on desktop. https://www.andyryanphotographer.com/projects

/* Projects 1 item row mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1643385275940_1762 .slide {
    width: 100% !important;
}
}

Is there a solution to bring the hamburger option back without issues?

Thanks in advance.

On 5/19/2023 at 10:28 PM, arpllc said:

Hi @tuanphan.

My website is https://www.andyryanphotographer.com/

I had the custom CSS to change the menu to hamburger, but it seems this CSS is no longer working in the wells template.

div#mobileMenuLink a:before {
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
    visibility: visible;
}
#mobileMenuLink a {
    visibility: hidden;
}

See attached.

I've had to remove this for client functionality.

 

Additionally, just to note, I have custom CSS for my projects page so it operates similarly to my galleries on desktop. https://www.andyryanphotographer.com/projects

/* Projects 1 item row mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1643385275940_1762 .slide {
    width: 100% !important;
}
}

Is there a solution to bring the hamburger option back without issues?

Thanks in advance.

Use this new code

nav#mobileMenuLink a {
    visibility: hidden;
    text-align: right;
}
nav#mobileMenuLink ul li a:before {
    content: "\e030";
    font-family: 'squarespace-ui-font';
    visibility: visible;
    font-size: 30px;
    display: block;
}