Jump to content

Hide Header only on scroll up - code injection or Custom CSS

Recommended Posts

Site URL: https://alexanderfantini.com/intro

Hello!!

I'm currently trying to have the header be visibile only when at the top and at the bottom of the page. I'd like to hide the header whenever I scroll up (currently hiding when scrolling down).

To fix the header in place I used this in the Custom CSS page:

.site-header{
  position: fixed;
}

 

Website: https://alexanderfantini.com/intro

pw: testing

Anybody able to help me with this?

Many many thanks in advance!!

Link to comment
On 2/26/2022 at 10:40 PM, alexanderfantini said:

Site URL: https://alexanderfantini.com/intro

Hello!!

I'm currently trying to have the header be visibile only when at the top and at the bottom of the page. I'd like to hide the header whenever I scroll up (currently hiding when scrolling down).

To fix the header in place I used this in the Custom CSS page:

.site-header{
  position: fixed;
}

 

Website: https://alexanderfantini.com/intro

pw: testing

Anybody able to help me with this?

Many many thanks in advance!!

Have you tried setting not fixed position for header?

image.png.0ff8b99acfcfed4b0afdbad3a1716d72.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 hours ago, bangank36 said:

Have you tried setting not fixed position for header?

image.png.0ff8b99acfcfed4b0afdbad3a1716d72.png

Hello there!!

Thank you very much for getting back to me!

I can't seem to be able to see that floating window (as I believe I'm currently using Squarespace 7.00)

I can see header options in the Site Style page but nothing about fixed position!

Link to comment
On 2/26/2022 at 10:40 PM, alexanderfantini said:

Site URL: https://alexanderfantini.com/intro

Hello!!

I'm currently trying to have the header be visibile only when at the top and at the bottom of the page. I'd like to hide the header whenever I scroll up (currently hiding when scrolling down).

To fix the header in place I used this in the Custom CSS page:

.site-header{
  position: fixed;
}

 

Website: https://alexanderfantini.com/intro

pw: testing

Anybody able to help me with this?

Many many thanks in advance!!

With 7.0 version, you can try adding to Home > Design > Custom Css

#siteHeader {
  position: relative;
}
#mainContent.main-content {
  padding-top: 0 !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
22 hours ago, bangank36 said:

With 7.0 version, you can try adding to Home > Design > Custom Css

#siteHeader {
  position: relative;
}
#mainContent.main-content {
  padding-top: 0 !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you very much! This fixes the scroll up issue but now the header does not reappear once I reach the bottom of the page!

The idea is that I treat the top of the page as a start of the UX and when the users scrolls to the very bottom, the footer and header comes back in same as the main navigation page.

See www.alexanderfantini.com/creative and www.alexanderfantini.com/intro

 

Without your code the header appears once the viewer reaches the end of page and I'd love to retain that feature!

Is it possible?
Many thanks in advance!

Link to comment
On 3/6/2022 at 6:09 AM, alexanderfantini said:

Thank you very much! This fixes the scroll up issue but now the header does not reappear once I reach the bottom of the page!

The idea is that I treat the top of the page as a start of the UX and when the users scrolls to the very bottom, the footer and header comes back in same as the main navigation page.

See www.alexanderfantini.com/creative and www.alexanderfantini.com/intro

 

Without your code the header appears once the viewer reaches the end of page and I'd love to retain that feature!

Is it possible?
Many thanks in advance!

Have you found the solution yet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.