Hello,
I want to make a text message and navigation sticky on the top when the page scroll down.
Does it posibile to make the section sticky as second menu?
And I don't want to main menu sticky on the top.
I have try to use the css as below, but it doesn't work.
{
position:sticky;
top:0;
}
Thank you.
Hi. Position Sticky does not work if one of the parent elements has any of the overflow values as hidden and if there is a sufficient height for slipping. If you use Helix Ultimate this code will help you make Position Sticky start working
.body-innerwrapper {
overflow-x: visible;
}Hi there!
Thanks for your query.
Please use position: fixed instead.
Sample code for you:
section#section-id-1638809956904 {
position: fixed!important;
top: 0px;
z-index: 999!important;
width: 100%;
}Please replace the section ID with yours, and a suitable heigher z-index value that suits you!
Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
Best Regards
Hi~
Thank you so much.
Yes, the section fixed on the top of the page.
And I want to fixed it only when the page scroll down to the section.
How can I modify it?
Best.
Hi Pavel,
Thank you so much. It does what I need. And thanks for your explanation.
You are wellcome
I have a similar question:
on my layout I have above the compont are a section (row) called "teaser". its directly below the header.
The header coints main-menu and is fix.
how can I now fix the section "teser" that it does not scroll?
I tried in the custom css with following code but it doesnt work:
section#section-id-teaser {
position: fixed!important;
// top: 0px;
z-index: 999!important;
width: 100%;
}
to explain it better I made a screen shot. My target is that only the component area scrolls and the sections teaser, position1, position2, postion 3 remained fix.
http://vorbereitung.tsv-malsch.de/index.php/eroeffnungsseite-mitgliederbereich/test-new-home/?tp=1
section#section-id-teaser { position: fixed!important; // top: 0px; z-index: 999!important; width: 100%; }
Hi.
Your code is not working because a non-existent selector is being used. Use Dev Tools to identify the correct selector.
Any caching and compression should be turned off and cleared during the development period. This should only be enabled after the site is fully ready for operation. Disable it, otherwise, your CSS changes will not be applied immediately.