[Support request] Footer Sticky Bar

Home Forums Support Footer Sticky Bar

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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!

    #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 🙂

    #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!

    #1669714
    Ying
    Staff
    Customer Support

    Oh sorry that should be 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.

    #1670330
    Rostyslav

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

    I found this and it works!

    Thank you for the extended help!

    #1670916
    Ying
    Staff
    Customer Support

    Yes, this works too 🙂
    You are welcome!

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