Archived topic
Sticky block help please
7 replies · Started by Carol on January 21, 2022
I have been using divi for years but my site has got really clunky and slow so I have researched fastest themes and switched to GP. I have started to work on the site but can't see a way to replicate some behaviour that was built in to divi using GP.
here is my current site with the "Book Cheapest Direct Rates" button sticking to the bottom of main nav on scroll https://www.raasay-house.co.uk/
here is my development site using GP where I would like to stick the button to underside of the main nav on scroll
https://devsite.raasay-house.co.uk/
I am not very clued up on coding but I want to use this lightweight GP theme without losing important stuff like that sticky button.
Can you help please?
Hi there,
the new site is under maintenance mode - can i get a password ?
You can share URLs and login details in the Private Information field.
sorry it's actually https://devsite.raasay-house.co.uk/wp
I have another site without the wp at the end which is in maintenance mode. Sorry about that
Try adding this CSS:
.booking_button {
position: -webkit-sticky;
position: sticky;
top: 60px;
}amazing thank you!
Now I just need to get the sticky position right for each device. With 60px from top on desktop the button disappears up under my main nav but on a mobile it lines up perfectly.
Does this mean I need to add multiple css segments in simple css with different distances from the top for each device?
We can do this:
/* Desktop sticky position */
.booking_button {
position: -webkit-sticky;
position: sticky;
top: 60px;
}
/* Desktop when admin bar is present */
.admin-bar .booking_button {
top: 92px;
}
/* Mobile variants */
@media(max-width: 768px) {
/* Mobile sticky position */
.booking_button {
top: 60px;
}
/* Mobile when admin bar is present */
.admin-bar .booking_button {
top: 92px;
}
}The included the rules for when the admin-bar is visible. Its generally 32px tall, so whatever Top value have needs to be increased by that - may need tweaking
aha the admin bar knocks it out of line!
Thank you so much for your fast help. That's me sorted!
Glad to be of help!
