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