Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

LukeDesign82

New Coder
Hi all, I am getting back into CSS/HTML after many years off. I am building a website in Squarespace. I am trying to set up the home page with a hero image in the header that takes up the full screen (or snapped to full screen) on desktop. Then, when you scroll down it displays the navigation bar.

Here is an example from another website:
https://rudneynovaes.com

This would only be for the home page.

Thank you!
 
Do you have a question about your build?
Yes, I am unsure if this can be achieved through Squarespace's settings - or if I can do this with code.
Yes, I am unsure if this can be achieved through Squarespace's settings - or if I can do this with code.

Here is my website on the page I am trying to do this:

https://www.lucasano.com/home

I found this code from another designer who had success, but it’s not working for me:

Code:
/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/660dabf2c74e425529726520/t/661a73f4b369d36c1bd3199b/1713009653619/TEST_home-page.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}
Do you have a question about your build?
 
Yes, I am unsure if this can be achieved through Squarespace's settings - or if I can do this with code.


Here is my website on the page I am trying to do this:

https://www.lucasano.com/home

I found this code from another designer who had success, but it’s not working for me:

Code:
/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/660dabf2c74e425529726520/t/661a73f4b369d36c1bd3199b/1713009653619/TEST_home-page.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}


I'm not that familiar with what is possible in the SquareSpace interface, but if you can get to the code, then I see no reason you cannot achieve this.

There are a couple ways to achieve the full-viewport background image. I've done a container with BG image that is width:100% and height: 100dvh or 100vh. Using dvh unit may help alleviate mobile browser issues where the browser chrome shifts on scroll (looking at you Safari).

As for the sticky nav, getting this to work can be tricky. Usually the issue is the placement of the nav itself in the html. It must be a child of the container that is full content HEIGHT. If the parent is no taller than the nav it won't 'stick' as the parent will be scrolled out of view. In the example layout you show, the nav would be at the top of the content BELOW the full-height image container.

So:

<parent> <--position:relative
Header
Nav <--position:sticky
Content
</parent>

or

header
<parent> <--position:relative
nav <--position:sticky
content
</parent>

HTH
 
Last edited:

Buy us a coffee!

Back
Top Bottom