How to create a floating header in Squarespace // Squarespace Header Above Page Tutorial

Поделиться
HTML-код
  • Опубликовано: 10 дек 2024

Комментарии • 50

  • @cycle9241
    @cycle9241 Год назад

    Very Very Very Cool.. I Love it! Thanks for this one Becca, you are rockin as always. 😊

  • @IndigoPlans
    @IndigoPlans Год назад

    Great content as usual, thanks Becca! 🌼🌺🌸🧚‍♂️

  • @heathermelling8163
    @heathermelling8163 3 месяца назад

    thank you! so helpful!

    • @InsideTheSquare
      @InsideTheSquare  3 месяца назад

      You are so welcome - happy to help! 🥰

  • @woutmco
    @woutmco Год назад +1

    So great! Is there a way toe exclude mobile?

    • @InsideTheSquare
      @InsideTheSquare  Год назад

      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

  • @amandascheuzger
    @amandascheuzger Год назад

    Love this!! Is it possible to make the top margin different from the side margins?

    • @InsideTheSquare
      @InsideTheSquare  Год назад

      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}

  • @aleksandarjeremicmulero1453
    @aleksandarjeremicmulero1453 Год назад

    Awesome 🤩
    Is it also possible to set the navigationbar in the bottom of the screen on mobile devices? So it will be user friendlier.

    • @InsideTheSquare
      @InsideTheSquare  11 месяцев назад +1

      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!

  • @ThomasMerlino
    @ThomasMerlino Год назад +2

    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!

    • @InsideTheSquare
      @InsideTheSquare  Год назад +1

      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

    • @ThomasMerlino
      @ThomasMerlino Год назад

      @@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!

    • @ThomasMerlino
      @ThomasMerlino Год назад +2

      @@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. :)

    • @paul2413
      @paul2413 4 месяца назад

      @@ThomasMerlino the fixed position in the settings also worked for me

  • @kennethmurphy8585
    @kennethmurphy8585 Год назад

    This. Is. Awesome.

  • @ChibiKeruchan
    @ChibiKeruchan 11 месяцев назад +1

    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.

    • @InsideTheSquare
      @InsideTheSquare  10 месяцев назад

      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

    • @InsideTheSquare
      @InsideTheSquare  10 месяцев назад

      Thank you! I'm so glad you like my work 🥰

  • @swimsmooth
    @swimsmooth Год назад

    Hi Becca - can you add a symbol as a link within a Squarespace header, so that it's not all just text-based?

    • @InsideTheSquare
      @InsideTheSquare  Год назад +1

      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!

    • @swimsmooth
      @swimsmooth Год назад

      Many thanks Becca. Love your work ✌️

  • @usudolf6606
    @usudolf6606 2 месяца назад

    weirdly after the first code my header doesnt change why or what might be causing this?

    • @InsideTheSquare
      @InsideTheSquare  2 месяца назад

      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!

  • @NoahStillAsleep
    @NoahStillAsleep 6 месяцев назад

    can someone tell me te appropriate code for shopify because i relly don't know what to do

    • @InsideTheSquare
      @InsideTheSquare  6 месяцев назад

      I'm focused on Squarespace - sorry I can't be of more help!

  • @PsychItsMike
    @PsychItsMike 6 месяцев назад

    Weird, the corners are curved but there is a white background behind it. Dont know how to remove it

    • @InsideTheSquare
      @InsideTheSquare  6 месяцев назад +1

      You can try using !important over any color & opacity specific values. Check out this article for more troubleshooting hacks: insidethesquare.co/code-help

    • @DLCA13
      @DLCA13 5 месяцев назад

      i have same problem and couldnt solve it with "!important" . do you change the white background somehow?

  • @villegasdesign
    @villegasdesign Год назад

    This seems to work well in chrome but the blur effect is not working in safari any solutions?

    • @InsideTheSquare
      @InsideTheSquare  Год назад +1

      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
      @villegasdesign Год назад

      @@InsideTheSquare Wow!!! You’re a genius, that solved it. Thank you so much.

    • @villegasdesign
      @villegasdesign Год назад

      @@InsideTheSquare I noticed that somehow this code also ends up adding a similar design element to footers newsletter section

    • @danielhahn655
      @danielhahn655 Год назад +1

      @@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.

  • @ThomasMerlino
    @ThomasMerlino Год назад

    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!

    • @InsideTheSquare
      @InsideTheSquare  Год назад +1

      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

    • @ThomasMerlino
      @ThomasMerlino Год назад

      @@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! :)

    • @albee9807
      @albee9807 Год назад

      @@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

  • @TylerZollman
    @TylerZollman 10 месяцев назад

    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?

    • @InsideTheSquare
      @InsideTheSquare  10 месяцев назад

      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

  • @danielhahn655
    @danielhahn655 Год назад

    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.

    • @InsideTheSquare
      @InsideTheSquare  Год назад +2

      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
      }

    • @danielhahn655
      @danielhahn655 Год назад +1

      @@InsideTheSquare Well that did it! You're amazing!

    • @villegasdesign
      @villegasdesign Год назад +1

      Worked for me too!! Awesome thanks

    • @heathermelling8163
      @heathermelling8163 3 месяца назад

      me too!

  • @ClaudiaShaldersFloriano
    @ClaudiaShaldersFloriano Год назад

    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)}

    • @InsideTheSquare
      @InsideTheSquare  Год назад

      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