[Support request] STICKY BLOCK WHEN SCROLLING DOWN

[Yohann]

Hello, I use page hero header and sticky navigation.
I would like a bloc to be sticky under the header when scrolling down
How can I do this ?
Thank you

[David]

Hi there,

can you share a link to where we can see the block ?

[Yohann]

you can see it on This page : page test

I want to 2 item to be sticky inter the header when scrolling down on desktop and mobile
Thank you for your help.

[David]

Which items will be sticky ?

[Yohann]

both of them ‘besoins” “solutions”

[Ying]

1. You’ve added the class .my-sticky-element to the block, but the . should not be included, please remove the ..

2. Then you can add this CSS to make theme sticky:

.my-sticky-element {
    position: sticky;
    top: 130px;
    z-index: 10000;
}

3. But you have this CSS which prevents elements to be sticky, you’ll have to remove this CSS.

html, body {
    overflow-x: hidden;
}

4. The off canvas menu also adds this CSS which causes the same issue as no.3:

.offside-js--init {
    overflow-x: hidden;
}

You will have to add this CSS to override it:

body {
    overflow-x: unset !important;
}

[Yohann]

It works only on desktop. Can you fix it on mobile also?
Thank you

[Ying]

When I check, it works on mobile, make sure your mobile browser cache is cleared, or try checking on another mobile device.
https://www.screencast.com/t/jsb2L6FNbNZZ

[Yohann]

No it is not sticky on mobile …

[Ying]

Sorry, got it mixed with another topic.

It doesn’t work either on desktop or mobile, I can see you’ve fixed the . issue in the class, but I’m not seeing the CSS being added to your site which is step 2 of my reply here: https://generatepress.com/forums/topic/sticky-block-when-scrolling-down/#post-2554521

Can you try disabling the cache plugin?

[Yohann]

Thank you, it works.
But I used this code to prevent horizontal moving of the page on mobile :

html, body {
overflow-x: hidden;
}

So as I removed this code, do you know how I could fix this problem ?

Thank you,

[Yohann]

Thank you, it works.
But I used this code to prevent horizontal moving of the page on mobile :

html, body {
overflow-x: hidden;
}

So as I removed this code, do you know how I could fix this problem ?

Thank you,

[David]

Where was the horizontal movement occurring as i don’t notice it on the URL you shared?

[Yohann]

For example

https://yderhy-dev-dr-yohann-derhy.pf26.wpserveur.net/besoins/paraitre-plus-jeune/

https://yderhy-dev-dr-yohann-derhy.pf26.wpserveur.net/besoins/une-belle-peau/

Thank you

[David]

How is the visual composer content added to the site ?
As it looks to be that content creating the issue.

[Author]

Posts