Adding a sticky header (navigation) using Wexley the template?

Site URL: https://candidcreature.com

Does anyone know if there has been an update in SquareSpace to allow for a sticky header using Wexley templates?

Thanks,

Ian

8 hours ago, iancurcio said:

Site URL: https://candidcreature.com

Does anyone know if there has been an update in SquareSpace to allow for a sticky header using Wexley templates?

Thanks,

Ian

Add to Design > Custom CSS

header#header {
    position: fixed;
    top: 0;
    z-index: 999;
    left: 0;
    right: 0;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
}
div#pageWrapper {
    margin-top: 115px;
}

Thanks, tuanphan. While this does stick the header, it does not allow the gallery to feed under the header but rather through it. Is there another workaround? 

Thanks,

Ian

On 11/12/2021 at 2:48 AM, iancurcio said:

Thanks, tuanphan. While this does stick the header, it does not allow the gallery to feed under the header but rather through it. Is there another workaround? 

Thanks,

Ian

Use this new code

header#header {
    position: fixed;
    top: 0;
    z-index: 999;
    left: 0;
    right: 0;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
}
@media screen and (min-width:901px) {
div#pageWrapper {
    margin-top: 180px;
}
}

I appreciate all your help, tuanphan. Unfortunately, this didn't work either. I attached a screenshot for your review. 

On 11/14/2021 at 8:46 PM, iancurcio said:

I appreciate all your help, tuanphan. Unfortunately, this didn't work either. I attached a screenshot for your review. 

Try reload your site & add code again

Still not working...bummer.

8 hours ago, iancurcio said:

Still not working...bummer.

You can keep the code in Custom CSS then let me know. I will try checking again

Okay. The code is currently  in Custom CSS. Thanks.

I see it is fine here

See video: https://www.loom.com/share/ddee43d4e1544231b4e186da79953a79

I'm actually wanting the photo galleries to disappear under the logo and navigation text. Please see the two attached screenshots. Thanks - Ian

You want make the header like as screenshot 2?

https://candidcreature.com/

Yes. I want the gallery of images to disappear behind the header as they are being scrolled through (sen in screenshot 2). I put the red line there in photoshop to illustrate my point. In screenshot 1 the gallery of images are going through the header. 

Thanks so much for your help!

You are my hero! Thank you so much. Works perfectly. 

Looks like this code creates a problem when viewing the site on a mobile device. The top image and the menu is lost. Any ideas?

14 hours ago, iancurcio said:

Looks like this code creates a problem when viewing the site on a mobile device. The top image and the menu is lost. Any ideas?

Try this new code The code will run on desktop only

@media screen and (min-width:901px) {
header#header {
    position: fixed;
    top: 0;
    z-index: 999;
    left: 0;
    right: 0;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
    background-color: white;
}
div#pageWrapper {
    margin-top: 150px;
}
}

Worked perfectly. Thanks!