Sticky footer button

Hi Nave,

You can add a custom CSS class to the parent Container block and use a custom CSS to achieve this.

Here is a sample CSS:

.sticky-footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    min-height: 75px;
}

body {
    margin-bottom: 75px; /* match min height of notice */
}

In this CSS, I’m selecting the CSS class of the Container block which I set to sticky-footer.

See: https://share.getcloudapp.com/mXuJlmdW

Hope this helps! Kindly let us know how it goes. :)

Thanks Fernando
Where should I put this css code?

Hi
Never mind, I put it under customize > CSS
Is there a better way to implement this code? Thanks

Great! In any case, here is our article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/

Adding it through Appearance > Customize > Additional CSS is the ideal way to implement this code since you’d want to implement this code all throughout your website.

actually I use this website to create my clients landing pages so I need this code to be specific to each page. Is there a way to implement this inside the element?

I see. If you wish to implement CSS code page specific, a plugin like Simple CSS would do the trick.

See: https://wordpress.org/plugins/simple-css/

Hope this helps! :)

Thank you!

You’re welcome Nave! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)

In the same page I wish to hide the scroll up button because its overlapping my stickey footer, how can I hide it in a specific page with css?

Here is a CSS you can try:

a.generate-back-to-top {
    display: none;
}

Hope this helps! :)

awesome thank you!

You’re welcome Nave! Glad that worked! Feel free to reach out anytime if you’ll need assistance with anything else. :)