Archived topic

Floating Footer Bar

3 replies · Started by Ben on April 3, 2023

Viewing posts 1–4 of 4

April 3, 2023 at 1:47 am #2594201

Hi guys,

I'm trying to create a footer bar.

I've created the bar itself but how do I make it float?

I've added the URL in the Private Information field.

Thanks!

April 3, 2023 at 1:57 am #2594211

Hi Ben,

Give the parent Container Block a class of my-floating-footer.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then, add this through Appearance > Customize > Additional CSS:

.gb-container.my-floating-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.site-footer {
    margin-bottom: 109px;
}

Then, increase the z-index of your Footer Container Blocks to a high value like 10000. Reference: https://docs.generateblocks.com/article/layout-options-overview/#z-index

April 3, 2023 at 3:27 am #2594304

Awesome, thanks.

Is there a way to make it invisible and only appear on scroll?

Thanks
Ben

April 3, 2023 at 5:15 am #2594425

Hi there,

it would require some Javascript to hide until scroll, which i can have a look at as we have done something similar in the forums before.

But at the moment you have a sticky footer advert on your site. And thats sitting in front of your sticky footer.... and that we cannot account for. So you would need to have one or the other....

This archived topic is closed to new replies.

Start building better websites today.