[Resolved] Footer Sticky Bar

[Rostyslav]

Hello,

How can I create exactly the same sticky bar for the bottom like in this image: https://ibb.co/hW6x8Z1

It should just appear in mobile and tablet view.

Is there any tutorial on how can I achieve that bar with 3 boxes each with text and icon and linked?

Thank you!

[Ying]

Hi there,

It can be achieved with Block elements and our block editor plugin Generateblocks.
https://docs.generatepress.com/article/block-element-overview/
https://wordpress.org/plugins/generateblocks/

1. Go to appearance > elements, add a new Block element.

2. Create a structure like this:
https://www.screencast.com/t/RxDBvhzcXXkT

3. Set Container A to Full width both Container and Inner container, set its all paddings to 0.

4. Set Container B1,B2,B3 to 33.33% width.

5. Activate Fill Horizontal Space for Buttons (not Button).

6. You can add Icons and links for each button, adjust colors.

7. Select Container A > Advanced, activate hide on desktop.
https://www.screencast.com/t/m7eJnbSbfaM

8. Add a custom class: sticky-bottom to container A.

9. Choose location depends on your needs, choose Hook as block type, choose generate_after_footeras hook.

10. Go to customizer > additional CSS, add this CSS:

  .sticky-bottom {
    position: sticky;
    bottom: 0;
}

Let me know how it works 🙂

[Rostyslav]

Hello again,

I had two issues:

1) I can´t disable the desktop view because that function doesn’t appear: https://ibb.co/HKkspMS
2) In mobile view it looks layup: https://ibb.co/T18y86J

Thank, you!

[Ying]

Oh sorry that’s a pro feature of GB.

You could add hide-on-desktop as a custom class, just like how you add sticky-bottom.

So go to the block editor, set B1,B2,B3 width to 33.33% under the mobile tab which is 100% by default.

[Rostyslav]

@media (min-width: 768px) {
.sticky-bottom {
display: none;
}

I found this and it works!

Thank you for the extended help!

[Ying]

Yes, this works too 🙂
You are welcome!

[Juned]

Really amazing.

[Ying]

Thanks Juned 🙂

[Shane]

Hi, Ying thanks a ton for this tutorial. I replicated it to a T but the sticky bar seems to sit under certain objects like forms and youtube embeds. Is there a way to get it to be on top of everything?

[Elvin]

Hi Shane,

You can try adding z-index property to the CSS so it goes on top of things.

Learn about z-index and its application here – https://www.w3schools.com/cssref/pr_pos_z-index.asp

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts