[Resolved] Footer Sticky Bar

Home Forums Support [Resolved] Footer Sticky Bar

Home Forums Support Footer Sticky Bar

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #1669470


    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!

    Customer Support

    Hi there,

    It can be achieved with Block elements and our block editor plugin Generateblocks.

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

    2. Create a structure like this:

    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.

    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 🙂


    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!

    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.


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

    I found this and it works!

    Thank you for the extended help!

    Customer Support

    Yes, this works too 🙂
    You are welcome!


    Really amazing.

    Customer Support

    Thanks Juned 🙂


    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?

    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

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.