⚠ 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: ruclips.net/video/euJqHXs_L1M/видео.html
Hi! is there a way to adjust the width of the background? I have a dropdown with a few short words and it just looks silly with so much space around them. Thank you!
Play around with this code! You'll want to add it to Design > Custom CSS and know the selectors. /* dropdown items color */ .header-nav-folder-item a { color: pink !important; }
Great video, and thanks very much for being here! I like what you've shown with the dropdown menus, but I have a question: Can you make the dropdown menu 'transparent', so that only the menu choices appear to show? If not, it's not a deal-breaker, but it sure would be awesome for how I want my site to appear.
@@braxtonbrown1333 dropdown menus are a global element so they use a specific selector. Try adding !important after your value, and if that doesn't work, you might be on an older version of Squarespace. Learn more about the themes and versions here: insidethesquare.co/themes and for more troubleshooting tips, check out insidethesquare.co/code-help
Hey Ruth! I am not quite sure what you mean - can you send me an email with the details or a screenshot of what you are trying to accomplish? I'd be happy to help! 😁 You can reach me directly at support-at-insidethesquare .co
Thanks so much for sharing your knowledge, its been a life saver! Could you please provide the CSS for changing the font color inside the dropdown to black? I've been using "a" and Ive been at it for hours and don't see anything on the cheat sheet related directly to it. I have version 7.1 Thank you!
Absolutely! Sometimes you'll need to add !important to your code to overwrite the built in CSS. Give this code a try: .header-nav-folder-content a{color:#000!important}
Great question! You can update the gradient colors to any color name or color code you want. Here is an example: .header-nav-folder-content{background:linear-gradient(to bottom, green, white) } I have a free guide to gradients with more info available at insidethesquare.co/gradients
Love this tutorial! Super easy to follow and a great way to add a nice customization to your squarespace site to help stand out in a sea of boring dropdowns!
Great video, cleared a lot of my questions. Be kind enough to tell though, is there a way to make fonts in the dropdown apear with normal widht, curently they appear as bold. Thank you in advance :)
oh, forgot to add also to remove the underline of the active link, and if iwere to ask for the best i would say replace the underline, with making only the active link bolded (i have a folder with more stores in it, it would be nice to have a dropdown with regular fonts, and have the active link bolded, right now they are all bolded, and the active one is underlined)
Hello! Thanks a lot for the video - i changed the background but is it also possible if i changed the background already to change also the font color?
Great question - and yes - absolutely! All we need to do is add a new line of CSS to change the color of the active links inside the folder. In this code below, change the word red to whatever color you want the links to be. You can use a color name or a HEX color code; totally up to you! Hope this helps and best of luck with your project :) .header-nav-folder-content a {color:#red!important}
Hey! Do you know if it's possible to make the Header Nav button have a dropdown menu inside of it? I originally use code to just turn a folder into a button, BUT i need to keep that button up on all browser sizes.... I could only figure out how to do this if the button was the native header button.... any ideas?? You're my hero :)
What a cool idea! That would be rad.. the only workaround I can think of is to make the last link in your header a folder with the drop down info you need. Then toggle off the header button and use CSS to style that link like a button. You can use the same technique from this video: insidethesquare.co/squarespace-tutorials/two-button-menu Hope that workaround helps and best of luck with your project!
@@InsideTheSquare Ok, I had that!! :) BUT now, the client wants the button to remain visible in the header at all times, even when it goes down to mobile. I found a way to do THAT, but it required SquareSpace's built-in button... not the new button I had made (like you suggested!) We were in sync there, but do you know if I can do both at the same time?
@@CallieRoberson-b9e for it to be visible on mobile would require some javascript - I"d recommend posing on the Squarespace forums to see if anyone has created a plugin for that. And a pro tip from one designer to another - please be careful /advise your client about the minimum clickable area for accessibility standards. squeezing a logo, mobile menu, and button into a header is going to take up a lot of space on smaller screens. Best of luck!
When you are viewing one of the pages from within a dropdown menu, is it possible to have the page link in the dropdown look different (like have a different color?) So that the viewer knows which page within the dropdown they are currently viewing.
Hi! This is great, thank you. Do you know how to change the background colour of the dropdown menu ON MOBILE specifically? It looks fine on the website but not on the phone. What would be the coding for mobile in this case? Thank you!
Squarespace just did a HUGE update and certain features are no longer working. You can learn more here: insidethesquare.co/fluid where I discuss some of the new changes they made to Mobile design. You can also submit a code help request here: insidethesquare.co/code-help
Hey there! That is a pretty complicated functionality question and not really a CSS style thing - i would reach out to Squarespace support to see if they can help. Best of luck! 👍👍
Hi Becca. Wonderful info. I would love to see a video showing how to create a clickable drop-down list on a page. Forms offer a drop-down list to select from, but I would like one where the selection is a link to another internal page. Is there a CSS solution?
There is a really nice plugin that uses Javascript for pull down accordian menu and tabs that you can fully customize: sqspthemes.squarespace.com/plugins/squarespace-accordion-tabs
Hi ! love your videos. i just subscribed. Can you let me know how to change the color or the menu item when it hovers. My menu items are white and are changing to black, and you can't see them when this happens.
Hi Cyndi! You're going to want to check your font menus and make sure that you're branded fonts are set correctly. You can find more info here: support.squarespace.com/hc/en-us/articles/206545327-Changing-fonts
I have loved your tutorials, but I have a question. I keep trying to add transparency to the .header-nav-folder-content via opacity and rgba, and neither are taking. Is it simply not possible in 7.1?
@@InsideTheSquare Thank you for the response! I did try to add that, but when I did, the code wouldn't take. It threw out an error message. Thought I must be missing something!
Thank you so much for your help! I have an odd request. I want to have my first shop page have images with categories linked, which I figured out how to do. But howwww do I get the image gallery to only show up on one page of the shop and not each category? I'm guessing there is code for this and I just don't know what it is. Thank you!!
Whenever I click on one of the dropdown pages, it makes all of the other pages lose their css. This css only works when I'm viewing the dropdown from other pages. Any idea how to fix this?
That’s pretty strange - if your site isn’t working the way it’s supposed to, you should definitely contact the Squarespace support team: support.squarespace.com/
I'm hoping to add a thin outline around my main navigation font. Do you know what the css name is for the header navigation font? I've tried my best to mess around with it but can't figure out the name. I'm hoping to add a thin black outline around my navigation links in the main menu.
Happy to help! What version/theme are you using? Some older versions use different names. Here is an article with a little more info on that if you aren't sure: insidethesquare.co/themes
Hey! I've just found your channel, great information, thank you so much! I would like to remove the one and only drop down part of my navigation menu which is left over from the template I chose, is there a way of doing this? If anyone can point me in the right direction I'd really appreciate it! Thanks so much
This code isn't working for me, I think because I have two dropdown menus in my header navigation. How do you adjust for this? I'd like to make the drop down background color and font color changes for all dropdown menus in my header.
Hey Megan! This is a pretty standard code, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help
Is there any code on how to change the "back" button in the dropdrown menu (folder), there is no such thing on the pc, but when I enter the site via the phone, you can see ..
Great question - and yes! That back arrow has it's own code name we can use to change it with CSS. Here is a tutorial for ya: ruclips.net/video/WROyLdUHRxk/видео.html
@@InsideTheSquare I seem to have made a mistake, I need to change that text "back" to any other word, I searched the internet but I can't find anything about it anywhere. If it's possible, you know better. But this also helps me a lot
Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. if I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!
@@InsideTheSquare That'd be awesome! Thanks so much, I love how creative you are with creating CSS. Do you think you could also change the color of the text in the drop down menu?
Super helpful. Thank you! Would love to be able to change the font colour in the dropdown only... (edit) found it in your reply to someone else! Thank you : .header-nav-folder-content a{color:#000!important}
The code is still accurate, and works on my site, so I'm not sure why it's not working for you! If !important isn't doing the trick, check out my other troubleshooting tips 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: ruclips.net/video/euJqHXs_L1M/видео.html
Your codes in the description are a life saver! thanks so much
Your comment made my night! I’m happy to hear that my work is helping you with yours
Fantastic. The final touch I have been looking for
Thank You so much
That improved the look of my menu so much, thank you! Really clear and easy to understand.
Yay! So happy I could help! 🙌🏻
Thank you! Your tutorials are so well put together and have helped immensely!
Thanks Erin - I am so happy I could help! 😁
Hi! is there a way to adjust the width of the background? I have a dropdown with a few short words and it just looks silly with so much space around them. Thank you!
Yes, same questions here. Could you please let me know if you find a way to fix it?
This is so so helpful, thank you so much for making this video!!
You're so welcome!
Is it possible to change the background color of a folder on the home page and use a different background color for that same folder on another page?
THANK YOU! I much appreciate your excellent and clear videos!
Magificant. Makes my life easier and better .Thanks.
Your videos are sooo helpful!! Thanks !
Hi, nothing is changing when I enter these codes. Any idea why? I am using 7.1
Thank you for this. It helped me change the background color. Would love code to change the font color at some point.
Play around with this code! You'll want to add it to Design > Custom CSS and know the selectors.
/* dropdown items color */
.header-nav-folder-item a {
color: pink !important;
}
@@InsideTheSquare Thank you for being so generous. It worked perfectly!
Love your work - thanks so much!
Thanks for letting me know Anna! Your comment made my day 🥰
Great video, and thanks very much for being here! I like what you've shown with the dropdown menus, but I have a question: Can you make the dropdown menu 'transparent', so that only the menu choices appear to show? If not, it's not a deal-breaker, but it sure would be awesome for how I want my site to appear.
Thanks Greg! Try this tutorial out: insidethesquare.co/squarespace-tutorials/opacity?rq=transparency
@@InsideTheSquare I havent been able to get this to work for drop down menus as you cant select a block id for them?
@@braxtonbrown1333 dropdown menus are a global element so they use a specific selector. Try adding !important after your value, and if that doesn't work, you might be on an older version of Squarespace. Learn more about the themes and versions here: insidethesquare.co/themes and for more troubleshooting tips, check out insidethesquare.co/code-help
Thank you! So helpful. Do you have a code to make the background color auto adjust to the width of the longest line?
Hey Ruth! I am not quite sure what you mean - can you send me an email with the details or a screenshot of what you are trying to accomplish? I'd be happy to help! 😁 You can reach me directly at support-at-insidethesquare .co
You're amazing, thank you!
Very helpful - thank you! 😌
Thanks so much for sharing your knowledge, its been a life saver! Could you please provide the CSS for changing the font color inside the dropdown to black? I've been using "a" and Ive been at it for hours and don't see anything on the cheat sheet related directly to it. I have version 7.1 Thank you!
Absolutely! Sometimes you'll need to add !important to your code to overwrite the built in CSS. Give this code a try:
.header-nav-folder-content a{color:#000!important}
Hello! This was very helpful, thank you. What if you want a specific color gradient? For example Green to White etc.
Great question! You can update the gradient colors to any color name or color code you want. Here is an example:
.header-nav-folder-content{background:linear-gradient(to bottom, green, white) }
I have a free guide to gradients with more info available at insidethesquare.co/gradients
Very helpful and clear - thank you!
Yay! So happy I could help! 🙌🏻
Love this tutorial! Super easy to follow and a great way to add a nice customization to your squarespace site to help stand out in a sea of boring dropdowns!
Your comment just made my day - thank you so much for letting me know! 🥰
is there a way to add a darker color, or shadow when you hover over the menu options?
Can you make a the drop down box transparent?
Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉
Sos la mejor!
Yay! So happy I could help! 🙌🏻
Great video, cleared a lot of my questions. Be kind enough to tell though, is there a way to make fonts in the dropdown apear with normal widht, curently they appear as bold. Thank you in advance :)
oh, forgot to add also to remove the underline of the active link, and if iwere to ask for the best i would say replace the underline, with making only the active link bolded (i have a folder with more stores in it, it would be nice to have a dropdown with regular fonts, and have the active link bolded, right now they are all bolded, and the active one is underlined)
It sounds like you need to change your settings via your site style menu.
Hello! Thanks a lot for the video - i changed the background but is it also possible if i changed the background already to change also the font color?
Great question - and yes - absolutely!
All we need to do is add a new line of CSS to change the color of the active links inside the folder. In this code below, change the word red to whatever color you want the links to be. You can use a color name or a HEX color code; totally up to you! Hope this helps and best of luck with your project :)
.header-nav-folder-content a {color:#red!important}
Hey! Do you know if it's possible to make the Header Nav button have a dropdown menu inside of it? I originally use code to just turn a folder into a button, BUT i need to keep that button up on all browser sizes.... I could only figure out how to do this if the button was the native header button.... any ideas?? You're my hero :)
What a cool idea! That would be rad.. the only workaround I can think of is to make the last link in your header a folder with the drop down info you need. Then toggle off the header button and use CSS to style that link like a button. You can use the same technique from this video:
insidethesquare.co/squarespace-tutorials/two-button-menu
Hope that workaround helps and best of luck with your project!
@@InsideTheSquare Ok, I had that!! :) BUT now, the client wants the button to remain visible in the header at all times, even when it goes down to mobile. I found a way to do THAT, but it required SquareSpace's built-in button... not the new button I had made (like you suggested!) We were in sync there, but do you know if I can do both at the same time?
@@CallieRoberson-b9e for it to be visible on mobile would require some javascript - I"d recommend posing on the Squarespace forums to see if anyone has created a plugin for that. And a pro tip from one designer to another - please be careful /advise your client about the minimum clickable area for accessibility standards. squeezing a logo, mobile menu, and button into a header is going to take up a lot of space on smaller screens. Best of luck!
@@InsideTheSquare Thank you!
Wow, so technically I just learned to code!
You absolutely did!! 🙌
When you are viewing one of the pages from within a dropdown menu, is it possible to have the page link in the dropdown look different (like have a different color?) So that the viewer knows which page within the dropdown they are currently viewing.
Hi! This is great, thank you. Do you know how to change the background colour of the dropdown menu ON MOBILE specifically? It looks fine on the website but not on the phone. What would be the coding for mobile in this case? Thank you!
Squarespace just did a HUGE update and certain features are no longer working. You can learn more here: insidethesquare.co/fluid where I discuss some of the new changes they made to Mobile design. You can also submit a code help request here: insidethesquare.co/code-help
Hi there. Do you have a video tutorial on how in the store/shop when you select a variant it changes image to the variant you have selected? Thanks 😊
Hey there! That is a pretty complicated functionality question and not really a CSS style thing - i would reach out to Squarespace support to see if they can help. Best of luck! 👍👍
Hi Becca. Wonderful info. I would love to see a video showing how to create a clickable drop-down list on a page. Forms offer a drop-down list to select from, but I would like one where the selection is a link to another internal page. Is there a CSS solution?
There is a really nice plugin that uses Javascript for pull down accordian menu and tabs that you can fully customize: sqspthemes.squarespace.com/plugins/squarespace-accordion-tabs
How do you make the background smaller on left and right sides?
Great question! You can try adjusting the padding using properties like padding-left and padding-right
pretty good
Hi ! love your videos. i just subscribed. Can you let me know how to change the color or the menu item when it hovers. My menu items are white and are changing to black, and you can't see them when this happens.
Hi Cyndi! You're going to want to check your font menus and make sure that you're branded fonts are set correctly. You can find more info here: support.squarespace.com/hc/en-us/articles/206545327-Changing-fonts
Thank you very much for your video! It's very annoying if you can't click on the main folder. Is there maybe a solution or a code to change that?
Ooo that's a good idea for a tutorial. I'll add it to my list!
@@InsideTheSquare Thank you for your quick response! I'm looking forward :)
I have loved your tutorials, but I have a question. I keep trying to add transparency to the .header-nav-folder-content via opacity and rgba, and neither are taking. Is it simply not possible in 7.1?
It's totally possible; Did you try adding !important to the end of the code?
@@InsideTheSquare Thank you for the response!
I did try to add that, but when I did, the code wouldn't take. It threw out an error message. Thought I must be missing something!
Thank you so much for your help! I have an odd request. I want to have my first shop page have images with categories linked, which I figured out how to do. But howwww do I get the image gallery to only show up on one page of the shop and not each category? I'm guessing there is code for this and I just don't know what it is. Thank you!!
Great question! I'll have to brainstorm on this one; I have an e-commerce workshop planned very soon, so keep any eye out!
@@InsideTheSquare Thank you!!
Is there a way you can change the background colour on the dropdown for one page only so it matches the background for specific pages
You can use a unique block ID to target a specific thing on your site; check out this tutorial for more info: ruclips.net/video/h8qfZdaATbU/видео.html
You are a goddess. Thank you so much!!!
You're so welcome! 🥰
Whenever I click on one of the dropdown pages, it makes all of the other pages lose their css. This css only works when I'm viewing the dropdown from other pages. Any idea how to fix this?
That’s pretty strange - if your site isn’t working the way it’s supposed to, you should definitely contact the Squarespace support team: support.squarespace.com/
how do I make the menu show up as an icon (classic three lines) instead of "folder"?
This tutorial should do the trick! insidethesquare.co/squarespace-tutorials/mobile-menu-desktop
Will this code still work with fluid? I definitely need more space between links in the dropdown navigation menu.
Hey Buffy! This will still work for any 7.1 site. :) Fluid only changes page sections, so global elements like this still have the same selectors.
@@InsideTheSquare Thank you!!!!
how do I find the "name of the folder"? As in this video the folder goes by ".header-nav-folder-content" or is this universal?
I got it! THANK YOU SO MUCH
I'm hoping to add a thin outline around my main navigation font. Do you know what the css name is for the header navigation font? I've tried my best to mess around with it but can't figure out the name. I'm hoping to add a thin black outline around my navigation links in the main menu.
Happy to help! What version/theme are you using? Some older versions use different names. Here is an article with a little more info on that if you aren't sure: insidethesquare.co/themes
@@InsideTheSquare I'm in 7.1 in the Clarkson theme
Hey! I've just found your channel, great information, thank you so much! I would like to remove the one and only drop down part of my navigation menu which is left over from the template I chose, is there a way of doing this? If anyone can point me in the right direction I'd really appreciate it! Thanks so much
Hey Lily! You can remove anything from your menu by dragging it to the "not linked" section of your site in your pages menu. Hope that info helps!
@@InsideTheSquare Thank you so much! That has really helped. Thank you for your amazing content :) x
This code isn't working for me, I think because I have two dropdown menus in my header navigation. How do you adjust for this? I'd like to make the drop down background color and font color changes for all dropdown menus in my header.
Hey Megan! This is a pretty standard code, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help
@@InsideTheSquare Never mind! It was a user error ;) thanks for the reply!
Is there any code on how to change the "back" button in the dropdrown menu (folder), there is no such thing on the pc, but when I enter the site via the phone, you can see ..
Great question - and yes! That back arrow has it's own code name we can use to change it with CSS. Here is a tutorial for ya: ruclips.net/video/WROyLdUHRxk/видео.html
@@InsideTheSquare I seem to have made a mistake, I need to change that text "back" to any other word, I searched the internet but I can't find anything about it anywhere. If it's possible, you know better. But this also helps me a lot
Can you completely remove the background color? Or at least make the parameters of the color smaller?
Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. if I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!
@@InsideTheSquare That'd be awesome! Thanks so much, I love how creative you are with creating CSS. Do you think you could also change the color of the text in the drop down menu?
Is there other way to style the dropdown other than using code?
Unfortunately that is about it for now - other than colors and fonts in the site styles menu.
Thank you for this wonderful tutorial... Can you help me with creating 2 columns drop down menu? thank you
it works when i put the code in but then reverts back when i click onto a different page
Hey Chloe, did you exit edit mode after saving and clear the cache?
bullet girl number 1
fab fab
Super helpful. Thank you! Would love to be able to change the font colour in the dropdown only... (edit) found it in your reply to someone else! Thank you : .header-nav-folder-content a{color:#000!important}
Awesome - glad you got the code you needed 🙌
Is this out of date? Nothing works for me. It is still 7.1… so I have no idea why the most basic stuff does nothing. Even with the “!important”
The code is still accurate, and works on my site, so I'm not sure why it's not working for you! If !important isn't doing the trick, check out my other troubleshooting tips at insidethesquare.co/code-help