[Resolved] Sticky Sections on Top and Footer

[yig]

Hi there,

I am trying to make the first and last Sections on a specific page sticky (The regular navigation/site header/menu and footer elements on that page are disabled). Would this be possible?

I also tried to check making this through the Elements, but found it a bit complicated to use the Elements. So was just wondering if it is possible to manage it through Sections.

Thanks 🙂

[Leo]

Hi there,

Not sure if this is possible but can give it a shot with CSS.

Any chance you can disable the maintenance mode so we can see the page in question?

Thanks!

[yig]

Hi Leo,

Thank you very much for your message. Sure, if you can press ESC on keyboard before clicking anything on the screen I think you should be able to see the page now.

Cheers 🙂

[Leo]

So something like this?

#generate-section-1 {
    position: sticky;
    top: 0;
    z-index: 99;
}
#generate-section-6 {
    position: sticky;
    bottom: 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[yig]

Thanks very much really! I just added the Simple CSS plugin and added the code. It worked perfectly for the footer.

A slight problem with the header is that when you scroll down, the sections in the middle go over the header. This doesn’t happen with the footer (which has a section background image). I tried adding a background image to the top section as well but it didn’t help. Am I missing something?

Addition: I use built-in unsemantic grid (columns) in the the top section; if it’s relevant.

[Leo]

Try the edited code:
https://generatepress.com/forums/topic/sticky-sections-on-top-and-footer/#post-758528

[yig]

Worked awesome, thank you very much Leo! 🙂

[Leo]

Glad I could help 🙂

[yig]

Just as an update, this code works really nice as in even making the second section sticky so that creates a nice experience.

However I’m not sure if its me but I realised the stickies might not be working at all on iOS.

[David]

Hi there,

the safari browser needs a prefixed version of the sticky property. Include this within the CSS Rule above the current position property:

position: -webkit-sticky;

[yig]

Thank you very much David 🙂

This is the final code I added to Simple CSS and seems to work fine on both Android and iOS.

#generate-section-1 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 99;
}
#generate-section-6 {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}

Cheers

[David]

You’re welcome

[Author]

Posts