Hamburger Menu on Desktop Squarespace 7.1 

Thanks so much Sam! Glad you find them useful

Glad I could help Matt! Thanks for the kind words

You're welcome!

Thanks for the kind words!

Thank you Kim! I use a Blue Yeti mic and then run it through a software called Descript which allows you to apply 'studio sound' to the audio

Thank you, I appreciate it! @@bycrawford

Thank you! It should be. What specifically would you like to do?

You're welcome Kim! This requires a different setup, but can be achieved. Here's the tutorial: ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/

Thank you! If you click on your header > elements > button You should be able to untoggle the button :)

Thanks Alex! This is a lot more code-heavy. But there is a solution which is actually a paid plugin from Ghost Plugins if you're familiar with them?

ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/ This could also help!

Hey! Thanks so much. You can try this: @media screen and (min-width:992px) { .header--menu-open .header-menu { bottom: unset; height: 50%; left: 20px; right: 20px; top: 20px; } .header-menu-nav-folder.header-menu-nav-folder--active { overflow: hidden; } .header-menu-nav-folder-content a { margin-top: 10px; margin-bottom: 10px; } }

Thanks!

Thanks! Try deleting the code and adding this instead: .header-nav { display: none; } .header-actions { margin-right: 20px; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; }

Thanks Alanna! Try deleting the code and adding this instead: .header-nav { display: none; } .header-actions { margin-right: 20px; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; } Does this work for you?

Hey! Yes I believe there is a tutorial about creating this sort of system here: ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/

Glad I could help!

Glad it helped! I actually have a video on this too. You can find it here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fu1ev_p9Pgk.html

Huge thank you! My website looks stunning now. Your channel deserves so much credit. Your content is invaluable. Will certainly consider utilising your services or recommending them in the future. Thanks X @@bycrawford

Appreciate the kind words! Thanks a lot :D

Hey Georgia! This tutorial should help with that: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yXDALJhM1rg.html&ab_channel=S-EWebDesign

Not that I am aware of - sorry!

Glad it helped! Yes there is actually a plugin that does this really well. Here's the link: schwartz-edmisten.com/plugins/p/hamburger-menu-on-desktop-in-71

@@bycrawford Thanks man. It very kind of you.

You're welcome Laura! Try this: header .sqs-button-element--primary { margin-right: 20px !important; }

@@bycrawford YOU ARE A SAINT

Hey Cody! You can actually change this natively. When we use this code, it pulls in the styling of the mobile menu. So you just need to click on your header, navigate to the mobile icon and then style the burger there. Let me know if this is clear enough?

You can wrap your code in a media query like this: @media screen and (max-width: 1000px) { .header-nav, .header-actions { display: none; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; } } And then just adjust the px value!

Thank you Ilse! So what this code does is brings the mobile menu to the desktop, meaning to change the colour, you just need to go into the site styles of your site and change the colour. I have a video on this here to make it easier: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8URc-uELYUk.html Then if you wanted to turn the opacity down on the background, add this to your CSS: .header--menu-open .header-menu .header-menu-bg { background-color: rgba(0,0,0,0); } You can change the final '0' to anything between 0-1 (eg. 0.5) to make the menu slightly more opaque. Hope this helps!

@@bycrawford thanks so much! so the mobile view background color needs to be changed, meaning the mobile desktop view inherits mobile col our settings?

@@ilse5293 Exactly that!

@@bycrawford Fab! Thank you again :)

Hey Robin, yeah I don't think the mobile breakpoint method works with Bedford - I just checked. There's not too much info about this online, but I did find this post that may help: forum.squarespace.com/topic/214632-bedford-theme-adding-hamburger-menu-to-desktop/

Thank you! Try deleting the code and adding this instead: .header-nav { display: none; } .header-actions { margin-right: 20px; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; }

@@bycrawford wow, thank you so much for your help! your content is a massive help

@@bycrawford This worked to bring back the cart, but the logo is no longer centered. And the cart seems large for desktop. Can you help with this? Thank you!

Thank you! Yes you can do that using this: www.primitusconsultancy.co.uk/blog/replacing-the-mobile-hamburger-menu-icon-with-your-own-image-on-squarespace-71

Thanks for the response!@@bycrawford The link you shared did replace the hamburger menu to an icon of my choice! However, I do have two additional questions. Is it possible to make the icon "flex" into an "x" when the menu is opened or allow for the icon to have a different shade of color when the menu is open? Also, would it be possible to adjust the size of the text in the menu and align the content in the menu towards the left side of the screen when the menu is open?

@@chaselo7976 no problem! I have a guide on changing the text size here: bycrawford.com/blog/how-to-change-mobile-menu-font-size-squarespace To left align, you can do this in the nav menu settings when you're editing a page. For the flexing of the icon, I don't think you can do that in terms of animating it. But you can change the icon when the menu is open. Check out this guide: forum.squarespace.com/topic/256249-how-can-to-change-the-burger-menu-icon-to-a-close-icon-when-the-menu-is-open-on-mobile-squarespace/#comment-677130

@@bycrawford Thanks again for the help! I was able to successfully change the text size and align it towards the left of the menu. I was unfortunately unable to change the icon of the opened menu with the guide you provided. Do you have any ideas on how to fix this or perhaps a different solution to tackle this situation? I also realized that a scroll bar would appear when the menu is open. Would it be possible to hide that? Again, appreciate the help and responses!

Thanks! It should already be right aligned like in the video

@@bycrawford mine is left aligning - really odd - is there a way I can change this please?

Makes perfect sense Jacob! So you add a media query. In this instance it would look like this: @media screen and (max-width: 940px) { .header-nav, .header-actions { display: none; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; } } And then just adjust your px value in the 'max-width' bit to fit what you need.

Worked beautifully! Thank you! @@bycrawford

@@jacobbrooks9414 you're welcome!

Hey! You can just set that natively by going into the mobile menu editor and center aligning in there

Hey! You're very welcome. If you send me the link to your site I'll take a quick look for you. If RU-vid won't let you post the link just drop me an email at sam@bycrawford.com

Hey Furkz this would need some code!

@@bycrawford Hi, many thank for the reply. Could you point me in the right direction or is it something you can help with. Thanks

Yes of course! @@Verien7 Try this: @media screen and (min-width: 641px) { .header-menu .header-menu-nav .header-menu-nav-item a { margin-top: -10px } } And adjust the px value to suit your needs.

@@bycrawford Many Thanks, will give that a go.

Perfect Thanks SO much. @@bycrawford

Hey Jonathan, Try this: .header-nav, .header-actions { display: none !important; } .header-burger { display: flex !important; } .header--menu-open .header-menu { visibility: visible !important; opacity: 1 !important; } If that doesn't work, email me at sam@bycrawford.com with a screenshot of your code and I will help you out.

@@bycrawford that did turn the button into the hamburger, however it then goes into a button menu to be pressed to bring me to the page i assigned the button to bring me to, idk

@@johnathanjenkins289 Hey Jonathan, it doesn't target the button so that shouldn't be happening! If you send me an email I can take a proper look for you.

Hey! I found a forum thread on this here: forum.squarespace.com/topic/172992-burger-navigation-menu-logo-not-centered/ This code should fix your issue: @media screen and (max-width: 3000px) { /* Display burger icon at all widths and align right */ .header .header-burger { display: flex; order: 2 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Center logo in mobile device */ .header-title { text-align: center !important; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } .header-title-nav-wrapper { flex: 1 0 100%; } }