7.1 - Fixed header on only one page.

Hey everyone!

In 7.1, how would you set the header to a "Fixed position", on only one specific page? 

I.e., on all other pages it should disappear when you start to scroll.

I've searched high and low and it appears that no one has addressed this issue yet.

Any help would be greatly appreciated!

Pierre

If you share your page I can get the actual code, but it will be something like

#collection #header {
  position: fixed;
}

48 minutes ago, rwp said:

 

#collection #header {
  position: fixed;
}

 

Thanks so much rwp! This put me on the right path.

I found the collection-id for that specific page. 

This is the end result that worked just great.

#collection-5ef47e01a0680c5b1a28ecac #header {
  position: fixed !important;
  z-index: 1000;   //in case it scrolls behind certain elements further down.
  background: #df4430;  //because header was transparent.
}

How can I find out the collection-id?

like the one you wrote: 

#collection-5ef47e01a0680c5b1a28ecac

Thank you!

Hi @Jimi

You can find it from Body Class and Body ID.

Please use the like button if it helps you!

Best,
Leopold

Hi Leopold

Thank you for your reply!

How do I get to that info?

Using my browsers "Inspect" ? 

Hi @Jimi
Yes, You can get this details via Inspect Element of your browser. Then target the body tag.
You see ID and so huge! Class list there. Btw classes you can find collection also quick way is the ID of Body.

Please use the like button if it helps you!

Best,
Leopold

I am putting that into my page header code injection but nothing happens...

just this

@Jimi Please contact me via Skype: LeopoldJobs
I'll check it for you.

Please use the like button if it helps you!

Best,
Leopold

19 hours ago, Jimi said:

I am putting that into my page header code injection but nothing happens...

 

just this

 

 

Wrap code in style tag, add this to Page Header

<style>
  #header {
  position: fixed !important;
  z-index: 1000;   
  background: #df4430; 
}
</style>

@tuanphan

On 8/28/2020 at 11:52 AM, tuanphan said:

Wrap code in style tag, add this to Page Header

<style>
  #header {
  position: fixed !important;
  z-index: 1000;   
  background: #df4430; 
}
</style>

 

How would I use this to have a NON-fixed header on only one page? Meaning usually the site has a fixed header but on only one page, I want it NOT to be fixed. In the code, what is the opposite of "fixed?"

On 12/1/2020 at 7:46 PM, bigpoppapaul said:

@tuanphan

How would I use this to have a NON-fixed header on only one page? Meaning usually the site has a fixed header but on only one page, I want it NOT to be fixed. In the code, what is the opposite of "fixed?"

position: absolute !important;

Similar issue. I´m using the fixed header on my site, with transparent background.

So the header has no background color, unless you start scrolling.

This is great, on my front page, I would like to have a background color to the header at all time.

Is this possible?

On 3/11/2021 at 3:20 PM, Erlend-fs said:

Similar issue. I´m using the fixed header on my site, with transparent background.

So the header has no background color, unless you start scrolling.

This is great, on my front page, I would like to have a background color to the header at all time.

Is this possible?

Hi. Can you share link to your site? We can help easier

On 3/21/2021 at 1:52 AM, tuanphan said:

Hi. Can you share link to your site? We can help easier

Of course!

https://spinach-keyboard-w7ws.squarespace.com

On 3/22/2021 at 4:22 PM, Erlend-fs said:

Of course!

https://spinach-keyboard-w7ws.squarespace.com

Add to Design > Custom CSS

/* header color */
header#header {
    background: blue !important;
}

Thanks for your reply tuanphan!

I added the following code to the CSS, and the front-page now looks like this:

/* header color */
#collection-602bc23de4dc477c940dd427
{
header  {
    background: rgba(55,59,61, 0.2) !important;
}}

As you can see, I've added transparency to the header, and I am happy with this (when you land on the front page.)

But I want to remove the transparency "on-scroll" (the menu gets hard to read with content behind)

Is it possible to add another color-code to the header "on-scroll"?

19 hours ago, Erlend-fs said:

Thanks for your reply tuanphan!

I added the following code to the CSS, and the front-page now looks like this:

/* header color */
#collection-602bc23de4dc477c940dd427
{
header  {
    background: rgba(55,59,61, 0.2) !important;
}}

 

As you can see, I've added transparency to the header, and I am happy with this (when you land on the front page.)

But I want to remove the transparency "on-scroll" (the menu gets hard to read with content behind)

 

Is it possible to add another color-code to the header "on-scroll"?

 

Use new code

/* header color */
header#header.shrink {
    background: blue !important;
}

I'm now using these two codes, and it works fantastic!!!🤩

Thank you so much tuanphan!!

/* header color- landing */
#collection-602bc23de4dc477c940dd427
{
header  {
    background: rgba(55,59,61, 0.1) !important;
}
  }

/* header color on scroll */
#collection-602bc23de4dc477c940dd427
{
header.shrink  {
    background: rgb(55,59,61,) !important;
}
  }

Hi All, 

Facing an issue with my fixed header. I have a hero image gallery that's positioned as sticky so that the subsequent sections overlap when you scroll. The problem i'm trying to solve is regarding the z-index. The header seems to be positioned at the very top and ideally would prefer it if the entire header were positioned under the layer that overlaps it when you scroll – any help? 

Site link: https://lobster-lute-a5jp.squarespace.com/

PW: tp2023

Much appreciated! ✌🏽

I have a similar issue to the one above. I want the fixed header only on the first two sections of the homepage. Is this possible to do? I tried assigning a higher z-index than header to the rest of the sections on the page, but it didn’t work.

On 11/21/2023 at 1:17 AM, noblestudio said:

Hi All, 

Facing an issue with my fixed header. I have a hero image gallery that's positioned as sticky so that the subsequent sections overlap when you scroll. The problem i'm trying to solve is regarding the z-index. The header seems to be positioned at the very top and ideally would prefer it if the entire header were positioned under the layer that overlaps it when you scroll – any help? 

Site link: https://lobster-lute-a5jp.squarespace.com/

PW: tp2023

Much appreciated! ✌🏽

You mean header always sticky to top of page on scroll?

On 11/22/2023 at 11:01 AM, SunHouse said:

I have a similar issue to the one above. I want the fixed header only on the first two sections of the homepage. Is this possible to do? I tried assigning a higher z-index than header to the rest of the sections on the page, but it didn’t work.

What is your site url?

It's nature-goddess.com and the password is Sophia-Awake21. The first two sections are horizontal scroll with images. I want to keep the navigation sticky throughout the horizontal scroll only. Is this possible? 

On 11/25/2023 at 6:44 AM, SunHouse said:

It's nature-goddess.com and the password is Sophia-Awake21. The first two sections are horizontal scroll with images. I want to keep the navigation sticky throughout the horizontal scroll only. Is this possible? 

You can add this code to Website Tools (under Not Linked) > Custom CSS

body.homepage header#header {
    position: sticky !important;
    position: -webkit-sticky !important;
}

On 11/26/2023 at 12:02 AM, tuanphan said:

You can add this code to Website Tools (under Not Linked) > Custom CSS

body.homepage header#header {
    position: sticky !important;
    position: -webkit-sticky !important;
}

 

Thank you for taking the time to respond tuanphan. I tried the code, but it made the header sticky on the entire homepage. If possible, I want the header to be sticky only on the first three sections of the homepage (which are horizontal scrolling) and then to disappear for the rest of the sections on the page.