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

V7.1 Mobile Hamburger Icon Change


Rayray03

Question

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 post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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/877

Posted Images

10 answers to this question

Recommended Posts

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

 

Edited by tuanphan
ss changed burger tag, updated to new code
Link to post
  • 0

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 post
  • 0

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

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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...