Footer Sticky Bar – GeneratePress

This topic has 13 replies, 7 voices, and was last updated 3 years, 6 months ago by Fernando.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
February 23, 2021 at 9:25 am #1669470

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!

February 23, 2021 at 10:47 am #1669570
Ying
Staff
Customer Support
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 🙂
February 23, 2021 at 12:43 pm #1669708

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!

February 23, 2021 at 12:47 pm #1669714

Ying
Staff
Customer Support

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.

February 24, 2021 at 1:55 am #1670330

Rostyslav

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

I found this and it works!

Thank you for the extended help!

February 24, 2021 at 9:09 am #1670916

Ying
Staff
Customer Support

Yes, this works too 🙂
You are welcome!

March 4, 2021 at 5:25 am #1681662

Juned

Really amazing.

March 4, 2021 at 9:49 am #1682219

Ying
Staff
Customer Support

Thanks Juned 🙂

May 6, 2021 at 8:27 pm #1768267

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?

May 6, 2021 at 9:43 pm #1768307

Elvin
Staff
Customer Support

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

September 12, 2022 at 10:30 pm #2341202

Arnaud

https://wordpress-834202-2871905.cloudwaysapps.com/

I follow the steps here but my bar is stick at the bottom of the screen (and not the page)

I would like the Sticky Bar to follow the scroll at the bottom of the screen.

What is the solution ?

In the hook list, I noticed that I don’t have : generate_after_footer

thx guys.

September 12, 2022 at 10:37 pm #2341205

Fernando
Customer Support

Hi Arnoud,

May you start a new topic regarding this? Are you using a Block Element? Try after_footer.

Let us know in a new topic.

September 13, 2022 at 5:56 am #2341548

Arnaud

it works

https://wordpress-834202-2871905.cloudwaysapps.com/ (view on Mobile)

The CTA is a bit transparent with the background.
How do we make opaque.

thx

September 13, 2022 at 4:58 pm #2342170

Fernando
Customer Support

Glad that worked. May you start a new topic with regards to the other issue?
Author

Posts