⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ua-cam.com/video/euJqHXs_L1M/v-deo.html
Soooo simple compare to all the other tutorials I had found!! Thanks! Would it be possible to not have a burger but a word instead ("menu")? Thanks for your help! Much appreciated
This is a great question! I don't have a tutorial for this yet, but I do have a code that you can use. I added a border, and the code for "close" text, too, and changed the color of both: .burger-inner{ display:none } .burger-box:before{ content:"MENU"; border: 1px solid #000; padding: .25rem } .burger--active .burger-box:before{ content:"CLOSE"; color:red; border-color:red }
This is just what I was looking for. Thank you! I do have a questions about the Site's logo: I have it centered in the header, but when I changed the menu to the burger menu on the right side of the header it offset my logo to the left just a tad. Is there a way I can get it 100% centered again?
This is seriously such a great tutorial, you made it so easy! Thank you so much! I had one question - I've been trying to figure out how to change the background color of the menu when it is open and really not having luck. Any tips? :)
Hey Becca, I've been searching all over for this, your a life saver. I do have a question tho. Is there a way to exclude a nav link or 2 from the hamburger menu? That way I could have the 2 main links in the middle of the header and the rest of my links in the hamburger
Intersting quesiton - and yes! You can use the selector and the nth-of-type pseudo to target specific links on specific pages. This example would hide the last link in your nav on the mobile menu: .header--menu-open .header-menu-nav-item:last-of-type{display:none} This one would hide the second link: .header--menu-open .header-menu-nav-item:nth-of-type(2){display:none} Hope that info helps! If you need some more help with this concept, feel free to book a strategy session at insidethesquare.co/strategy
Totally! Just add a media query to the code like this: .header .header-burger{display:flex} .header-nav, .header-actions {display:none} @media only screen and (min-width: 640px){.header--menu-open .header-menu { opacity: 1; visibility: visible; width: 50%; margin-left: 50%; box-shadow: -5px 5px 15px #000}}
@@InsideTheSquare Thanks, forgive my dumb response but it comes back with a syntax error when add the extra bit of code to make full on mobile device ?
Awesome Tutorial! Question! Is it possible to have the menu be half screen on desktop but full screen on mobile? Agreed that taking over the full screen is too much for desktop, but mobile is now almost illegible. Is there a work around? Im on the newest version of Squarespace!
That's a great question! Even though this video is a little old, the codes are for the latest version (7.1) so they will work for you. :) The second code from this blog post has the 50% option (insidethesquare.co/squarespace-tutorials/mobile-menu-desktop) but we can modify it for any screen larger than 950px with a code like this: @media only screen and (min-width: 950px){ .header--menu-open .header-menu { width: 50%!important; } } To scoot it to the right hand side of the screen, modify the code like this: @media only screen and (min-width: 950px){ .header--menu-open .header-menu { width: 50%!important; margin-left:50% } }
great tutorial, is there any way to make the text /nav items font size smaller or close the gap between them, with 5 or more items makes it needs to scroll on desktop although mobile is perfect.? many thanks
This is awesome. The interface has changed a bit to update the design of the menu. Im curious how I can adjust the font sizes on the desktop version after i implement the mobile code as well as the spacing between each of the main nav pages. Any assistance would be appreciated
I definitely need to update this one, but I'm glad you were able to follow along anyway 😅 You can use a media query to isolate font size changes by device size! Here is an article with more info: insidethesquare.co/mobile
Great question KC - I always forget about that one!! 😅 This code will hide it on dekstop: .header-actions--right .customerAccountLoginDesktop{display:none}
Thank you so much for this easy solution! I looked everywhere but couldn't figure out: Is there any way to make the navigation close again not only by clicking the cross but also when you click on the page? Any help or suggestion here would be very much appreciated!
That's a great question! If we're working with black/white images or text, we can add an invert filter that only works when the mobile menu is open. This code will turn your icon the opposite color - so if it's black now, it will be come white when the menu is open: .header--menu-open .burger-inner{ filter:invert(1)!important }
Thanks so much for this awesome and simple fix. One more question: since it's possible for the mobile menu to occupy only half the screen horizontally, is it possible to tweak the code such that the menu also occupies half as much space vertically? So in the end you'd have a compact little menu that doesn't take up the whole page either way?
I think it's totally possible. Try playing with the code, and if you get stuck, feel free to submit a tutorial request with more info at insidethesquare.co/suggest-tutorial
That's a timing functionality built into the program for faster loads but you can try playing around with a transition duration! Hope that idea helps with your project :)
@InsideTheSquare Thank you. I did the code for removing the scroll bar, which is removing it from the page and the menu when it is opened. So the difference of it being with or without is causing the jump. I only want to remove it from the nav menu, not the page.
Hi! How can i change the style of the menu. For me, the navigation titles are way too big and the white vertical spacing between them is way too large. I have to scroll down to see the next navigation titles. Thanks for the feedback!
Yup - both can be done using the Squarespace program, without custom code! Check out this tutorial for more info on the header changes released a few months ago: insidethesquare.co/tiny/header
Thanks for the tutorial, may I ask how can I choose which exact title to hide? or how can I change the position of the action button or Nav? I would like to pay for the full course if you have it.
Hi Sh Lee! If you haven't already heard, my course, CustomCodeAcademy.com is open for enrollment. I would love to have you join and you'll be able to learn how to do what you asked above and SO. MUCH. MORE. :)
Thanks. However, the menu only opens 50% on mobile when I want it full screen on mobile. How do I fix that? Also how to I change the speed at which the menu opens so it looks more smooth?
Hey Becca! Thank you SO much for this tutorial! Is there an easy way to get the hamburger menu to be on the left of the screen, rather than the right (on desktop)?
@@InsideTheSquare Thank you so much! That changes the menu to open up on the left for me, but is there a way to move the actual hamburger icon to the left side of the screen?
Great question! Left is the default, but you can add a margin-left value to counter it, like this: width: 50%; margin-left:50% or this: width: 30%; margin-left:70%
@@InsideTheSquare Thank you so much for coming back to me! I was referring to the hamburger icon itself. I can't seem to get it to the right. Even if I change the nav layout. Hmmmm
Amazing, thank you! Is there a way to hide the main menu when the nested menu items are shown? Currently when you click on the folder in the menu, the main navigation links slide to the left.
Hi do you have something similar for Squarespace 7.0 - I have a client who now feels the hamburger menu is needed :( my template has no hamburger options.
I input this code and I have my hamburger to the left side of the screen, but my logo keeps shifting left from center and I cant move it back? Any solutions?
You need to change your header layout inside the Squarespace editor! In edit mode, select edit site header, and then choose a new layout that places your logo where you want it to be on desktop.
Great question! I have a different tutorial all about that; hope it helps with your project! insidethesquare.co/squarespace-tutorials/header-button-hover-effects?rq=menu
Great question! It depends on the settings/version you are using but I’d be happy to help you create the perfect code! Submit a code help request with more info: insidethesquare.co/code-help
Hi im also in need to keep the cart, iv looked at the link you sent below but i couldnt find any code that keeps the cart in the header. Could you please help. Thank you!
@@nancycooper If it doesn't look the way it does in the tutorial video, submit a code help request and I'll find the time to dig into your site to see what went wrong with your code. You can submit a cod help request at insidethesquare.co/code-help
⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ua-cam.com/video/euJqHXs_L1M/v-deo.html
Soooo simple compare to all the other tutorials I had found!! Thanks! Would it be possible to not have a burger but a word instead ("menu")? Thanks for your help! Much appreciated
This is a great question! I don't have a tutorial for this yet, but I do have a code that you can use. I added a border, and the code for "close" text, too, and changed the color of both:
.burger-inner{
display:none
}
.burger-box:before{
content:"MENU";
border: 1px solid #000;
padding: .25rem
}
.burger--active .burger-box:before{
content:"CLOSE";
color:red;
border-color:red
}
@@InsideTheSquare GREAT! Thank you!!
Wow, have I ever been searching for this answer forever! Thank you!!!
Yay! So happy I could help! 🙌🏻
This is just what I was looking for. Thank you!
I do have a questions about the Site's logo: I have it centered in the header, but when I changed the menu to the burger menu on the right side of the header it offset my logo to the left just a tad. Is there a way I can get it 100% centered again?
Great question! You can resize your logo or use css to move it with a transform:translate property 👍👍
This is seriously such a great tutorial, you made it so easy! Thank you so much! I had one question - I've been trying to figure out how to change the background color of the menu when it is open and really not having luck. Any tips? :)
I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
Hey Becca, I've been searching all over for this, your a life saver. I do have a question tho. Is there a way to exclude a nav link or 2 from the hamburger menu? That way I could have the 2 main links in the middle of the header and the rest of my links in the hamburger
Intersting quesiton - and yes! You can use the selector and the nth-of-type pseudo to target specific links on specific pages. This example would hide the last link in your nav on the mobile menu:
.header--menu-open .header-menu-nav-item:last-of-type{display:none}
This one would hide the second link:
.header--menu-open .header-menu-nav-item:nth-of-type(2){display:none}
Hope that info helps! If you need some more help with this concept, feel free to book a strategy session at insidethesquare.co/strategy
Brilliant!!! Exactly what I wanted and needed!
Happy to help ☺️
Thanks, I needed this! Is there a way to show the mobile menu at 50% width on desktop but at 100% width on mobile?
Totally! Just add a media query to the code like this:
.header .header-burger{display:flex} .header-nav, .header-actions {display:none}
@media only screen and (min-width: 640px){.header--menu-open .header-menu { opacity: 1; visibility: visible; width: 50%; margin-left: 50%; box-shadow: -5px 5px 15px #000}}
@@InsideTheSquare Thanks, forgive my dumb response but it comes back with a syntax error when add the extra bit of code to make full on mobile device ?
@@InsideTheSquare THANKS!!
Awesome Tutorial! Question! Is it possible to have the menu be half screen on desktop but full screen on mobile? Agreed that taking over the full screen is too much for desktop, but mobile is now almost illegible. Is there a work around? Im on the newest version of Squarespace!
That's a great question! Even though this video is a little old, the codes are for the latest version (7.1) so they will work for you. :) The second code from this blog post has the 50% option (insidethesquare.co/squarespace-tutorials/mobile-menu-desktop) but we can modify it for any screen larger than 950px with a code like this:
@media only screen and (min-width: 950px){
.header--menu-open .header-menu {
width: 50%!important;
}
}
To scoot it to the right hand side of the screen, modify the code like this:
@media only screen and (min-width: 950px){
.header--menu-open .header-menu {
width: 50%!important;
margin-left:50%
}
}
Something I didn’t even know I needed until now👍🏻
Glad I could inspire ya! 😎
great tutorial, is there any way to make the text /nav items font size smaller or close the gap between them, with 5 or more items makes it needs to scroll on desktop although mobile is perfect.? many thanks
Try adjusting the padding!
This is awesome. The interface has changed a bit to update the design of the menu. Im curious how I can adjust the font sizes on the desktop version after i implement the mobile code as well as the spacing between each of the main nav pages.
Any assistance would be appreciated
I definitely need to update this one, but I'm glad you were able to follow along anyway 😅 You can use a media query to isolate font size changes by device size! Here is an article with more info: insidethesquare.co/mobile
Thanks for this! how would you go about changing the font size/color on the menu?
This can be changed in your site settings. Check out the official Squarespace support articles for more info: support.squarespace.com/
Really very helpful
So happy I could help! 😁
Thanks heaps!
No problem - happy to help :)
Wow! Didn’t know I needed this. Is there a code to hide the login prompt at the top if I offer member services?
Great question KC - I always forget about that one!! 😅 This code will hide it on dekstop:
.header-actions--right .customerAccountLoginDesktop{display:none}
Thank you so much for this easy solution! I looked everywhere but couldn't figure out: Is there any way to make the navigation close again not only by clicking the cross but also when you click on the page? Any help or suggestion here would be very much appreciated!
Oooo! That's a great question. Feel free to submit a code help request with more info here: insidethesquare.co/code-help
Is there a way to change the menu icon to white, instead of black? The background of my banner is black so it isn't showing up.
That's a great question! If we're working with black/white images or text, we can add an invert filter that only works when the mobile menu is open. This code will turn your icon the opposite color - so if it's black now, it will be come white when the menu is open:
.header--menu-open .burger-inner{
filter:invert(1)!important
}
Thanks so much for this awesome and simple fix. One more question: since it's possible for the mobile menu to occupy only half the screen horizontally, is it possible to tweak the code such that the menu also occupies half as much space vertically? So in the end you'd have a compact little menu that doesn't take up the whole page either way?
I think it's totally possible. Try playing with the code, and if you get stuck, feel free to submit a tutorial request with more info at insidethesquare.co/suggest-tutorial
Any way to fix the back and forth jumping of the scroll bar width when the navigation menu is opened and closed?
That's a timing functionality built into the program for faster loads but you can try playing around with a transition duration! Hope that idea helps with your project :)
@InsideTheSquare Thank you. I did the code for removing the scroll bar, which is removing it from the page and the menu when it is opened. So the difference of it being with or without is causing the jump. I only want to remove it from the nav menu, not the page.
you are a sweet sweet savior
Hahaha! You’re welcome! Happy to help. 😎
Hi there, super tutorial, any Idea how I can make the logo centre on the desktop view? Logo is off-centre since I display the mobile menu!
Hey there! Try adjusting the padding, and if that doesn't work, feel free to submit a code help request here: insidethesquare.co/code-help
Hi! How can i change the style of the menu. For me, the navigation titles are way too big and the white vertical spacing between them is way too large. I have to scroll down to see the next navigation titles. Thanks for the feedback!
Hey there, you will want to adjust that in our site styles menu. Good luck!
How do you change the colors of the drop down (from hamburger) background and text?
Also, is there a way to change the padding vertically between text?
Yup - both can be done using the Squarespace program, without custom code! Check out this tutorial for more info on the header changes released a few months ago: insidethesquare.co/tiny/header
Thanks for the tutorial, may I ask how can I choose which exact title to hide? or how can I change the position of the action button or Nav? I would like to pay for the full course if you have it.
Hi Sh Lee! If you haven't already heard, my course, CustomCodeAcademy.com is open for enrollment. I would love to have you join and you'll be able to learn how to do what you asked above and SO. MUCH. MORE. :)
Thanks. However, the menu only opens 50% on mobile when I want it full screen on mobile. How do I fix that? Also how to I change the speed at which the menu opens so it looks more smooth?
To make it full screen, remove this part of the code:
width: 50%;
margin-left: 50%;
Thank you very much for that :)
Yay! So happy I could help! 🙌🏻
you're THE BEST
Thanks - I try 🥰
Hey Becca! Thank you SO much for this tutorial! Is there an easy way to get the hamburger menu to be on the left of the screen, rather than the right (on desktop)?
Hey Kambree! Just change margin-left: 50%; to margin-right: 50%; 😊
@@InsideTheSquare Thank you so much! That changes the menu to open up on the left for me, but is there a way to move the actual hamburger icon to the left side of the screen?
@@kambreeworthington6805 did you figure this out by chance having the same issue
@InsideTheSquare I'm looking for this answer too! thanks :D
Mine keeps defaulting to the left. I want it on the right! Any tips? Thanks heaps :)
Great question! Left is the default, but you can add a margin-left value to counter it, like this:
width: 50%; margin-left:50%
or this:
width: 30%; margin-left:70%
@@InsideTheSquare Thank you so much for coming back to me! I was referring to the hamburger icon itself. I can't seem to get it to the right. Even if I change the nav layout. Hmmmm
Amazing, thank you! Is there a way to hide the main menu when the nested menu items are shown? Currently when you click on the folder in the menu, the main navigation links slide to the left.
Great question! Feel free to submit a tutorial request at insidethesquare.co/suggest-tutorial
@@InsideTheSquare Just did thank you!
Hi do you have something similar for Squarespace 7.0 - I have a client who now feels the hamburger menu is needed :( my template has no hamburger options.
Hey Hedley! You can modify this code based on your 7.0 theme family; learn more about what that is here: insidethesquare.co/theme
I input this code and I have my hamburger to the left side of the screen, but my logo keeps shifting left from center and I cant move it back? Any solutions?
You need to change your header layout inside the Squarespace editor! In edit mode, select edit site header, and then choose a new layout that places your logo where you want it to be on desktop.
Is there a way to make the overlay menu background transparent?
This is a great question - and totally possible! You can change any color value to transparent with the RGBA code: rgba(0,0,0,0)
How do I get the menu to appear on the left as opposed to the right? Thanks!
Hi Danielle! I have a whole list of mobile specifics tutorials you can check out: insidethesquare.co/mobile
Just change margin-left: 50%; to margin-right: 50%; 😊
hi, how do i change the color from white to black (burger menu)?
Great question! I have a different tutorial all about that; hope it helps with your project! insidethesquare.co/squarespace-tutorials/header-button-hover-effects?rq=menu
How can I make this just for laptop view?
Great question! It depends on the settings/version you are using but I’d be happy to help you create the perfect code! Submit a code help request with more info: insidethesquare.co/code-help
How do I have the Cart button remain in the header?
Hey Asana, this might help you out with that: insidethesquare.co/squarespace-tutorials/cart-icon-style
Hi im also in need to keep the cart, iv looked at the link you sent below but i couldnt find any code that keeps the cart in the header. Could you please help. Thank you!
This does not work on mobile
Hey Nancy - exactly!! This code is designed to show the mobile menu on the desktop version of your site.
@@InsideTheSquare right but when I use it the menu on mobile is messed up
@@nancycooper If it doesn't look the way it does in the tutorial video, submit a code help request and I'll find the time to dig into your site to see what went wrong with your code. You can submit a cod help request at insidethesquare.co/code-help
@@nancycooper same thing happened to me, mobile version got messed up.