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

I added this to my Wells template and was working great. However, it seems that it no longer is functional on smaller screened devices. It appears, but is not clickable. I did try the code above, however, that doesn't seem to solve the issue either. 

3 hours ago, TravisA said:

I added this to my Wells template and was working great. However, it seems that it no longer is functional on smaller screened devices. It appears, but is not clickable. I did try the code above, however, that doesn't seem to solve the issue either. 

Which code are you referring to & What is your site url?

On 5/21/2023 at 8:04 PM, tuanphan said:

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

 

Added the above to the CSS, but was still not working on smaller screened devices, so I had to revert back to the template default 'Menu'. Have you experienced the same non-function on smaller device screen sizes?

On 7/3/2023 at 11:43 PM, TravisA said:

Added the above to the CSS, but was still not working on smaller screened devices, so I had to revert back to the template default 'Menu'. Have you experienced the same non-function on smaller device screen sizes?

What is your site url? We can check easier

Im interested in having a hamburger menu on mobile as well please.

https://dagoberto-perez.squarespace.com/

I tried the code above and I also had trouble with it. It changed to hamburger but was not active. TIA!

By the way, this worked for me.

#mobileMenuLink li.active-link a {
  color: transparent;
}
  #mobileMenuLink li.active-link a:before {
     margin: 16px -35px 0px 0px;
        visibility: visible;
     font-family: 'squarespace-ui-font';
     font-size: 3em;
     font-style: normal;
       color: #c3c3c3;
     speak: none;
     font-weight: normal;
     -webkit-font-smoothing: antialiased;
     content: "\e030";
     text-align: right;
     display: inline-block;
     vertical-align: middle;
  }