Change menu to burger menu icon flatiron template

Hi there

I would to add some custom code so that when viewing my site on mobile it shows a burger menu icon rather than the word menu. I wouldn’t want the icon when viewing it in desktop mode. 

Try plugging this into your custom css and see if it does the trick. You can upload your own hamburger icon into your custom files and use it by replacing the url in the "background-image" value.

#mobile-navigation #mobile-navigation-label:after {
    color: transparent;
    background-image: url(https://static1.squarespace.com/static/63f692c4eeb45a2b7e8c96c1/t/63f69485d05aa216add223f4/1677104261757/hamburger.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
}

Hi Mark, 

Thank you for this. That worked but when i first load the page and hit the burger menu it doesn't seem to pull down the whole menu and the contact section is hidden until you scroll down. 

www.tasunderwood.com

On 2/24/2023 at 2:23 AM, mactas said:

Hi Mark, 

 

Thank you for this. That worked but when i first load the page and hit the burger menu it doesn't seem to pull down the whole menu and the contact section is hidden until you scroll down. 

www.tasunderwood.com

Try Design > Site Styles > Disable Ajax Loading

I don’t seem to have that setting to disable on my Squarespace