Jump to content

V7.1 Mobile Hamburger Icon Change

Recommended Posts

Hello there!

I have some issues with 7.1 default hamburger icon on mobile. Two thin lines are not bold enough to be noticeable and I would like to change it to thick three lines(and maybe different color so it pops out more?) or other alternatives that stands out more such as menu texts.  Could someone possibly share the answer?

Thank you!

Link to comment
  • Replies 10
  • Views 5.9k
  • Created
  • Last Reply
On 11/21/2019 at 11:53 AM, Rayray03 said:

Hi there!

Thanks for your reply!

This is the url.(it's still not published.)  https://pepper-guppy-sw32.squarespace.com/

Thanks!

you can change to custom icon, by adding this code to Home > Design > custom CSS

.burger-inner:after {
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/877/877951.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    background-color: transparent !important;
    display: block;
    width: 50px;
    height: 20px;
}
.burger-inner>div {
    display: none !important;
}

 

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

Thank you so so much, tuanphan! 

I really appreciate your quick help! Could I possibly ask you one more thing? While I was checking the icon on my phone I realized that on some pages my mobile hamburger and the whole menu items are pushed slightly to the right. (Not from the CSS you provided, default two thin line hamburger icon does the same thing.)

For example, when I'm on video tutorial page(https://pepper-guppy-sw32.squarespace.com/video-tutorials) the hamburger icon is in the right place and shows the menu list right. Some other pages such as HOME, Curated posts and etc, the hamburger icon and the menu list themselves are more towards the right and the icon gets cut. I can't seem to understand why they behave differently. Any chance you could help me with this?

Thank you thank you!

 

video tutorial page_menu.jpg

video tutorial page_menu2.jpg

Homepage_menu.jpg

Homepage_menu2.jpg

Link to comment
  • 2 months later...
On 11/21/2019 at 1:18 AM, Rayray03 said:

Thank you so so much, tuanphan! 

I really appreciate your quick help! Could I possibly ask you one more thing? While I was checking the icon on my phone I realized that on some pages my mobile hamburger and the whole menu items are pushed slightly to the right. (Not from the CSS you provided, default two thin line hamburger icon does the same thing.)

For example, when I'm on video tutorial page(https://pepper-guppy-sw32.squarespace.com/video-tutorials) the hamburger icon is in the right place and shows the menu list right. Some other pages such as HOME, Curated posts and etc, the hamburger icon and the menu list themselves are more towards the right and the icon gets cut. I can't seem to understand why they behave differently. Any chance you could help me with this?

Thank you thank you!

 

video tutorial page_menu.jpg

video tutorial page_menu2.jpg

Homepage_menu.jpg

Homepage_menu2.jpg

 

Link to comment
  • 3 months later...
  • 1 month later...
On 6/10/2020 at 3:11 AM, designhalffull said:

@tuanphan Thank you so much for the solution. I am also trying to use this code and it works great however the animation looks strange and the x never pops up to close the menu. (My custom icon remains, but tilted from the animation.) Any thoughts on how to fix that? 

 

On 2/17/2020 at 9:56 PM, gizzidan said:

The custom css definitely works, but does anybody know how to disable the animation when clicking on the mobile menu?

Have you solved it yet?

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.