Great question - and yes! You can use a media query to tell a computer to only use this code when a screen is a certain size. I have more info about this on my site at insidethesquare.co/mobile
Great question - and yes! You can have two values ( top/bottom and left/right) in a margin property; this combo will make the top and bottom have a 2 rem margin, and the sides a 5 rem: {margin: 2rem 5rem}
This looks great, but I'm unable to get this to work. Is it dependent on any header settings? I tried toggling some header style settings, but this didn't seem to help (currently using dynamic). I can set the header margins fine, but none of the other CSS code does anything to change the header aside from margins or allow it to have the float/frost look. I copied and pasted from the code in the description as well. I love this channel, though!
Hey Thomas! If you're using Squarekicker, that's definitely the problem. A few folks have reached out about it and the style settings there add a second layer to your header that can't be overwritten by Squarespace CSS. If you aren't using Squarekicker, then something is definitely off! Send me a link to your site and I'll take a look: support-at-insidethesquare.co
@@InsideTheSquare Thank you! It's not published yet, but I will keep in mind to let you know when it is. It's not incredibly important to have this look and isn't a show stopper by any means, but I did like the look in the video! :) Thank you for replying; I appreciate it!
@@InsideTheSquare Got it! I simply needed to enable "Fixed position" in the header settings, and it worked. Thank you for offering to take a look! I wanted to reply with the solution in case this might help anyone else who has this trouble. :)
how to hide it while the site is above the fold? I don't want to appear above the fold on the homer page. but I want it to appear once you scroll down.
It sounds like you might want a scroll to stick header! Check out this tutorial for some ideas. You'll probably want to adjust the values of the basic code to push the header off the page initially, but its pretty straight forward so I;m sure you'll get it to work for your needs: insidethesquare.co/squarespace-tutorials/scroll-to-stick-header
Great question! You can use a unicode character (find a list of Sqsp compatible ones here -> insidethesquare.co/unicode ) but no icons.. yet ;) that tutorial is on my to do list so stay tuned!
It's hard to say without seeing your source code but I can try to help? What version/theme are you using? And if you can share a link here in the comments so I can take a look, please do!
You can try using !important over any color & opacity specific values. Check out this article for more troubleshooting hacks: insidethesquare.co/code-help
Interesting! I haven't had that issue with safari - try adding this property and value to your code. It' should work with any older Sarfari browser that's between 14 - 16.3: -webkit-backdrop-filter: blur(5px);
@@villegasdesign @InsideTheSquare I have noticed something similar, but with me it's on the "Header Text" of my Summary Blocks when using a Carousel design. I came here to see if anyone had seen it or figured out how to stop it.
Hello! I have been researching this, and I'm still unable to find a solution. I have the code in CSS set to: header { margin:2vw; background: inherit!important; background-color: rgba(128, 128, 128, .3)!important; backdrop-filter: blur(5px)!important; border-radius: 30px } This is working as shown on the video, but when I click on the hamburger in mobile, it doesn't show my main menu at all, and it reverts back to show the floating header without the blur effect or the border radius. Any thoughts on how to get this to work and still show the mobile menu when the hamburger is clicked? Thank you!
Hey Thomas! You can try to clear your cache and/or check on a mobile device instead of a simulated one. If your website still doesn't work the way mine does in the video, check out my other troubleshooting tips here: insidethesquare.co/code-help
@@InsideTheSquare Thank you! You were correct. I looked on my phone after logging on (the site isn't officially published yet), and it is working! Thank you again for the fast response as well as for the amazing content that you put out; I've watched several of your videos! :)
@@ThomasMerlino Hi, I'm getting the same problem. When I click on the hamburger on mobile, the main menu doesn't show up. I would appreciate it if you explained exactly what you did to fix it or if @InsideTheSquare can answer. Thank you
This is breaking my burger menu for my mobile version of the website. Instead of the whole page turning white to show me my options, only my header turns white and i cant see any of my other navigation links. I tried doing the mobile media query and it still doesnt work. This is my code: @media only screen and (max-width: 640px) {header { margin:0vw; background: inherit!important; background-color: rgba(255, 255, 255, .3)!important; backdrop-filter: blur(2px)!important; border-radius: 0px }} any suggestions?
If your site isn't responding the same way mine is in the video, something else is overwriting the code. I'd be happy to take a look - send a link to support-at-insidethsquare.co And if you're site isn't live, I can still access it if you can set it to password protected under settings > website > site availability > password protected
Hi Becca, thanks for this it's amazing. However, I've noticed that this code adds a similar effect to the Header Text of my Summary Blocks, but only in the Carousel design. I confirmed it was this code by removing the code from CSS and it went away, and then adding back and it returned. Any suggestions on how to stop that from happening? Thanks for everything, you're the best.
That is so interesting! Your summary carousel must be assigned a sub class of header for some reason; try adding a period before the word header to isolate the entire page header so no other classes will get the code, like this: .header { margin:2vw; background: inherit!important; background-color: rgba(255, 255, 255, .3)!important; backdrop-filter: blur(5px)!important; border-radius: 15px }
Hi Becca - this was really useful! Your videos are worth their weight in gold. I watched your how to style folders video; ruclips.net/video/wpsDJ4A2vOw/видео.html However, I'm on V7.1 and I tried injecting the code but it didn't work - is it possible to have the CSS that's in the description of the other video/listed below converted from version 7 to 7.1 please? ▸▸▸ Give the drop down a gradient background: .Header-nav-folder{background:linear-gradient(to bottom, #fee7ef,#c4e9fa) } ▸▸▸ Round the edges of the dropdown: .Header-nav-folder{border-radius:15px} ▸▸▸ Change the link alignment to the left: .Header-nav-folder{text-align:left!important;} ▸▸▸ Change the link alignment to the right: .Header-nav-folder{text-align:right!important;} ▸▸▸ Change the link alignment to the center: .Header-nav-folder{text-align:center!important;} ▸▸▸ Give your menu a border: .Header-nav-folder{border: 1px solid purple} ▸▸▸ Add a border between links: .Header-nav-folder a {border-bottom:1px solid #333} ▸▸▸ Increase the space between links: .Header-nav-folder a {padding-bottom:.5rem!important; } ▸▸▸ aaaaaand last but not least, give that fancy little drop down a shadow with this code: .Header-nav-folder{box-shadow: 5px 5px 15px rgba(0,0,0,0.25)}
Thank you so much! I'm glad you like my content 😊 I created an updated version of that tutorial specifically for 7.1 sites that has the codes you need. Here is a link for you: ruclips.net/video/8Beqlp8W8wM/видео.html
Very Very Very Cool.. I Love it! Thanks for this one Becca, you are rockin as always. 😊
You are so welcome! :)
Great content as usual, thanks Becca! 🌼🌺🌸🧚♂️
Thank you - so glad you enjoyed it! :)
thank you! so helpful!
You are so welcome - happy to help! 🥰
So great! Is there a way toe exclude mobile?
Great question - and yes! You can use a media query to tell a computer to only use this code when a screen is a certain size. I have more info about this on my site at insidethesquare.co/mobile
Love this!! Is it possible to make the top margin different from the side margins?
Great question - and yes! You can have two values ( top/bottom and left/right) in a margin property; this combo will make the top and bottom have a 2 rem margin, and the sides a 5 rem:
{margin: 2rem 5rem}
Awesome 🤩
Is it also possible to set the navigationbar in the bottom of the screen on mobile devices? So it will be user friendlier.
What a great idea! I don't have a code for that just yet but I will be sure to add it to my tutorial to do list; thanks for the suggestion!
This looks great, but I'm unable to get this to work. Is it dependent on any header settings? I tried toggling some header style settings, but this didn't seem to help (currently using dynamic). I can set the header margins fine, but none of the other CSS code does anything to change the header aside from margins or allow it to have the float/frost look. I copied and pasted from the code in the description as well. I love this channel, though!
Hey Thomas! If you're using Squarekicker, that's definitely the problem. A few folks have reached out about it and the style settings there add a second layer to your header that can't be overwritten by Squarespace CSS. If you aren't using Squarekicker, then something is definitely off! Send me a link to your site and I'll take a look: support-at-insidethesquare.co
@@InsideTheSquare Thank you! It's not published yet, but I will keep in mind to let you know when it is. It's not incredibly important to have this look and isn't a show stopper by any means, but I did like the look in the video! :)
Thank you for replying; I appreciate it!
@@InsideTheSquare Got it! I simply needed to enable "Fixed position" in the header settings, and it worked. Thank you for offering to take a look! I wanted to reply with the solution in case this might help anyone else who has this trouble. :)
@@ThomasMerlino the fixed position in the settings also worked for me
This. Is. Awesome.
Thanks - glad you like it!! 😊
how to hide it while the site is above the fold?
I don't want to appear above the fold on the homer page.
but I want it to appear once you scroll down.
It sounds like you might want a scroll to stick header! Check out this tutorial for some ideas. You'll probably want to adjust the values of the basic code to push the header off the page initially, but its pretty straight forward so I;m sure you'll get it to work for your needs:
insidethesquare.co/squarespace-tutorials/scroll-to-stick-header
Thank you! I'm so glad you like my work 🥰
Hi Becca - can you add a symbol as a link within a Squarespace header, so that it's not all just text-based?
Great question! You can use a unicode character (find a list of Sqsp compatible ones here -> insidethesquare.co/unicode ) but no icons.. yet ;) that tutorial is on my to do list so stay tuned!
Many thanks Becca. Love your work ✌️
weirdly after the first code my header doesnt change why or what might be causing this?
It's hard to say without seeing your source code but I can try to help? What version/theme are you using? And if you can share a link here in the comments so I can take a look, please do!
can someone tell me te appropriate code for shopify because i relly don't know what to do
I'm focused on Squarespace - sorry I can't be of more help!
Weird, the corners are curved but there is a white background behind it. Dont know how to remove it
You can try using !important over any color & opacity specific values. Check out this article for more troubleshooting hacks: insidethesquare.co/code-help
i have same problem and couldnt solve it with "!important" . do you change the white background somehow?
This seems to work well in chrome but the blur effect is not working in safari any solutions?
Interesting! I haven't had that issue with safari - try adding this property and value to your code. It' should work with any older Sarfari browser that's between 14 - 16.3:
-webkit-backdrop-filter: blur(5px);
@@InsideTheSquare Wow!!! You’re a genius, that solved it. Thank you so much.
@@InsideTheSquare I noticed that somehow this code also ends up adding a similar design element to footers newsletter section
@@villegasdesign @InsideTheSquare I have noticed something similar, but with me it's on the "Header Text" of my Summary Blocks when using a Carousel design. I came here to see if anyone had seen it or figured out how to stop it.
Hello! I have been researching this, and I'm still unable to find a solution. I have the code in CSS set to:
header {
margin:2vw;
background: inherit!important;
background-color: rgba(128, 128, 128, .3)!important;
backdrop-filter: blur(5px)!important;
border-radius: 30px
}
This is working as shown on the video, but when I click on the hamburger in mobile, it doesn't show my main menu at all, and it reverts back to show the floating header without the blur effect or the border radius. Any thoughts on how to get this to work and still show the mobile menu when the hamburger is clicked? Thank you!
Hey Thomas! You can try to clear your cache and/or check on a mobile device instead of a simulated one. If your website still doesn't work the way mine does in the video, check out my other troubleshooting tips here: insidethesquare.co/code-help
@@InsideTheSquare Thank you! You were correct. I looked on my phone after logging on (the site isn't officially published yet), and it is working! Thank you again for the fast response as well as for the amazing content that you put out; I've watched several of your videos! :)
@@ThomasMerlino Hi, I'm getting the same problem. When I click on the hamburger on mobile, the main menu doesn't show up. I would appreciate it if you explained exactly what you did to fix it or if @InsideTheSquare can answer. Thank you
This is breaking my burger menu for my mobile version of the website. Instead of the whole page turning white to show me my options, only my header turns white and i cant see any of my other navigation links. I tried doing the mobile media query and it still doesnt work. This is my code:
@media only screen and (max-width: 640px) {header {
margin:0vw;
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(2px)!important;
border-radius: 0px
}}
any suggestions?
If your site isn't responding the same way mine is in the video, something else is overwriting the code. I'd be happy to take a look - send a link to support-at-insidethsquare.co
And if you're site isn't live, I can still access it if you can set it to password protected under settings > website > site availability > password protected
Hi Becca, thanks for this it's amazing. However, I've noticed that this code adds a similar effect to the Header Text of my Summary Blocks, but only in the Carousel design. I confirmed it was this code by removing the code from CSS and it went away, and then adding back and it returned. Any suggestions on how to stop that from happening? Thanks for everything, you're the best.
That is so interesting! Your summary carousel must be assigned a sub class of header for some reason; try adding a period before the word header to isolate the entire page header so no other classes will get the code, like this:
.header {
margin:2vw;
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(5px)!important;
border-radius: 15px
}
@@InsideTheSquare Well that did it! You're amazing!
Worked for me too!! Awesome thanks
me too!
Hi Becca - this was really useful! Your videos are worth their weight in gold. I watched your how to style folders video; ruclips.net/video/wpsDJ4A2vOw/видео.html However, I'm on V7.1 and I tried injecting the code but it didn't work - is it possible to have the CSS that's in the description of the other video/listed below converted from version 7 to 7.1 please?
▸▸▸ Give the drop down a gradient background:
.Header-nav-folder{background:linear-gradient(to bottom, #fee7ef,#c4e9fa) }
▸▸▸ Round the edges of the dropdown:
.Header-nav-folder{border-radius:15px}
▸▸▸ Change the link alignment to the left:
.Header-nav-folder{text-align:left!important;}
▸▸▸ Change the link alignment to the right:
.Header-nav-folder{text-align:right!important;}
▸▸▸ Change the link alignment to the center:
.Header-nav-folder{text-align:center!important;}
▸▸▸ Give your menu a border:
.Header-nav-folder{border: 1px solid purple}
▸▸▸ Add a border between links:
.Header-nav-folder a {border-bottom:1px solid #333}
▸▸▸ Increase the space between links:
.Header-nav-folder a {padding-bottom:.5rem!important; }
▸▸▸ aaaaaand last but not least, give that fancy little drop down a shadow with this code:
.Header-nav-folder{box-shadow: 5px 5px 15px rgba(0,0,0,0.25)}
Thank you so much! I'm glad you like my content 😊 I created an updated version of that tutorial specifically for 7.1 sites that has the codes you need. Here is a link for you: ruclips.net/video/8Beqlp8W8wM/видео.html