V7.1 Mobile Hamburger Icon Change

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!

Can you share link to your site?

Hi there!

Thanks for your reply!

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

Thanks!

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

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!

@Rayray03 

Checked ... no cause found.
Try contacting SS Custom Care, if they fix it too well, if not, they will probably provide good suggestions to fix it.

@tuanphan

Thank you so much! I really appreciate your help!

Best,

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!

 

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

@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 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?