Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Change menu to hamburger icon in Wells mobile


Guest

Question

9 answers to this question

Recommended Posts

  • 0

@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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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:
 

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