Archived topic
Sticky sidebar not working after multiple attempts
9 replies · Started by Anne-Sophie on February 1, 2023
Hello GP Team !
I've been trying to get a sticky sidebar to work for a few hours, and unfortunately I still haven't gotten it ! My site is a staging one at the moment but I've taken some screenshots (which I hope will be enough) but I'm not sure how to share them here.
I've followed the different answers given on similar posts, but I'm still stuck.
I have created a right sidebar block with the following :
Container (class of sticky-container) > Container (class of sticky-elements) > grid > 3 containers containing my sidebar elements.
This block gets automatically inserted in pages/posts that have the content/sidebar layout selected.
In CSS, I've put the sticky-container height as 100% (and have also tried using different GP class names after inspecting) and my sticky-elements as sticky with a top position :
.sticky-elements{
position: sticky;
position: -webkit-sticky;
top: 40px;
}
.sticky-container > .gb-inside-container {
height: 100%;
}
Unfortunately none of my tries have worked - I've targeted different classes, changed container nesting (i.e removing the grid that contains my elements etc) ...
Thanks for your help !
Hi Anne-Sophie,
Any chance you can link us to your site where we can see the sidebar?
You can use the private info field for this.
Hi Ying,
Unfortunately not at the moment, as it's on localhost being developped. I have screenshots, but I can come back to this thread by next week when I finish it up, and put it online for testing.
Yes, that will do :)
Keep us posted!
Hello again ! I've uploaded the website online, that way you'll be able to access it with the codes provided. Everything's working almost perfectly, just that sticky sidebar issue (the code for it is in the Theme file editor). Also, a div with "hello world" has appeared on all pages except home, and I've searched everywhere I could think of to remove it but unsuccessfully.
Thank you for your help !
Try replacing this custom code you have:
html, body {
overflow-x: hidden;
}with this:
html, body {
overflow-x: clip;
}Then, add this:
div#right-sidebar .inside-right-sidebar {
height: 100%;
position: relative;
}
.gb-container.sticky-container {
position: sticky;
top: 40px;
}Perfect ! It works, thank you ! And just to follow up on the second part (unless you need me to open a new topic?), do you know where the "Hello World" div is coming from, that's appearing on the Reserve a Lesson, Blog, and Contact page ?
Hi there,
that Hello World looks like its coming from a Block Element - page hero.
Whilst viewing the page, check the Admin Bar > Elements menu, it provides shortcuts to ( Appearance > Elements ) for any active elements on that page. Look for the page hero one, and delete that element as i assume it is not required.
Hi David ! That was it, thank you so much !! I'll know where to look next time :)
Glad to be of help!