⚠ 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
Awesome, currently using your mobile menu css for desktop...wonder if I could figure out which bits to add together to get this to also work on desktop...probably not LOL
Hey Becca, great tutorial! I've done something similar to this but can't seem to find any answers. Rather than replacing the burger icon, I added 'menu' text next to it instead. The problem i'm having is that I can't find a way to change this text 'close' when the mobile menu is open, or alternatively, hide the 'menu' text when the nav is open. Any help would be much appreciated xx
Hey! How do you change the color of a button in an image card/poster/stack in CSS... Struggling with this, I want to do gradient color buttons sitewide.
Hey Regont! I have a tutorial about customizing by image type; an oldie but it still works😉 (ua-cam.com/video/FHzPyV4xVFM/v-deo.html) For some help on creating gradients, you can grab my free guide at insidethesquare.co/gradient Hope all that info helps with your project!
All you need to do is add the css for color, like this: .burger-box:before{content:"MENU"; border: 1px solid #000; padding: .25rem; color:#FFF!important}
⚠ 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
This is pretty slick Becca! Thank you for sharing this option.
You are so welcome Tamecka! 👍👍
Thanks so much!! I have been dying to do this. You've been very helpful. Is there a way to center the menu on the screen?
Great question! Feel free to submit a code help request here: insidethesquare.co/code-help
Awesome, thanks!!
You're welcome - happy to help! 😃
Awesome! How would you change the font color?
Great question Jan! Just add the property and value before the final bracket 👍👍 …;color:red!important}
Hey, thank you so much! :)
I have a question: how do I get it in the center and above the logo?
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.
Awesome, currently using your mobile menu css for desktop...wonder if I could figure out which bits to add together to get this to also work on desktop...probably not LOL
Haha - sure you can Karl! In fact, I think just copy/pasting them both into your site aught to do the trick; best of luck! 😉
Hey Becca, great tutorial! I've done something similar to this but can't seem to find any answers. Rather than replacing the burger icon, I added 'menu' text next to it instead. The problem i'm having is that I can't find a way to change this text 'close' when the mobile menu is open, or alternatively, hide the 'menu' text when the nav is open. Any help would be much appreciated xx
Hey Danielle! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
hi.great,but what is the code now to change back to Burger Menu? i get confused.thank you
Check out this tutorial insidethesquare.co/squarespace-tutorials/mobile-menu-desktop & be sure to delete any code you used previously.
Hey! How do you change the color of a button in an image card/poster/stack in CSS... Struggling with this, I want to do gradient color buttons sitewide.
Hey Regont! I have a tutorial about customizing by image type; an oldie but it still works😉 (ua-cam.com/video/FHzPyV4xVFM/v-deo.html) For some help on creating gradients, you can grab my free guide at insidethesquare.co/gradient Hope all that info helps with your project!
@@InsideTheSquare thank you so much! Keep up the great work 🙌🏼
great … but how do i change the MENU tect color? because the background of my website is black, so i would like the text MENU to be white. Thank you 😊
All you need to do is add the css for color, like this:
.burger-box:before{content:"MENU"; border: 1px solid #000; padding: .25rem; color:#FFF!important}
@@InsideTheSquare amazing … thank you 🤗
Are we able to also do an icon?
Yup! Check out this tutorial to see how: ua-cam.com/video/Ns1x8rJf8sw/v-deo.html
I can't seem to update the menu text color?
You can us the color property to change the color of the text, like this:
.burger-box:before{
content:"MENU";
color: red!important
}
@@InsideTheSquare Got it! Thank you!