How to Create Sticky Floating Footer Bar in GeneratePress Theme?

In this tutorial, we are going to Create Sticky Floating Footer Bar in GeneratePress Theme. Basically, it is a fixed floating bar with short notice and a custom button.

Also, in this guide learn more about

  • Why a sticky floating Footer bar?
  • How to hide sticky footer bar in Mobile and Tablet devices?
  • so on…
Create Sticky Floating Footer Bar in GeneratePress Theme

This is a short tutorial to Create a fixed Floating Footer Bar in GeneratePress Theme. Here we are going to use GeneratePress Premium Module so if you are using a free theme then you may require to use the plugin.

Get GeneratePress Theme

Moreover, you can also create floating social sharing buttons in GeneratePress. Also, you can mix this tutorial with social sharing buttons to create fixed footer bar social sharing buttons.

Why Create a Sticky Footer Bar?
Create Sticky Floating Footer Bar in GeneratePress Theme – Easy Methods
1. Add a Hook to Create Fixed Footer Bar
2. Style the Footer Bar
3. Result
Wrapping Up

Why Create a Sticky Footer Bar?

The reasons behind creating a Fixed Footer bar is that you can quickly offer a deal, create fixed social sharing buttons, promote your products/services, create a subscription box, promote discount coupon, etc.

Create Sticky Floating Footer Bar in GeneratePress Theme – Easy Methods

Basically, creating a fixed footer bar in GP Theme is easy as it only requires the knowledge of HTML and CSS, and also adding a fixed bar doesn’t affect your site speed as it is a small chunk of code.

Also Read: GeneratePress Review

1. Add a Hook to Create Fixed Footer Bar

We are going to use Elements Module to add a hook in GeneratePress Theme and also color the button alongside the text. So you need to activate the premium Modules in GP Theme.

If you haven’t activated the Elements and Colors Module yet then go to Appearance > GeneratePress > Activate Elements and Colors Modules.

Now go to Appearance > Elements > Add New > Choose Element Type as Hook and Add a Title.

Adding a New Hook in GeneratePress

Copy the following code and paste it in the element box. Here we are using hide-on-mobile and hide-on-tablet inbuilt GeneratePress classes to hide footer bar in mobile and tablet devices.

If you want to show the floating footer bar in mobile and tablet then remove these two classes from the code below.

Note: Change the notice paragraph, button text, and replace # with a link in the below code.

<div class="wplogout-footer-bar-fixed hide-on-mobile hide-on-tablet">
    <div class="notice-inner grid-container">
        <span>Get Free Access and VIP Support</span><a href="#"><button class="wplogout-reading-button">Join Facebook Group</button></a>
    </div>
</div>

Furthermore, Choose the Hook settings to show generate_after_footer and Go to Display Rules and choose Location as Entire Site.

Hook Settings after Footer in GeneratePress
Display Rules in Entire Site in GeneratePress Theme

2. Style the Footer Bar

Now let’s style the footer bar. Go to Appearance > Customize > Additional CSS. Copy and paste the following code. To customize the button Color, go to Appearance > Customize > Colors > Buttons.

.wplogout-footer-bar-fixed {
    position: fixed;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    z-index: 9999;
    background-color: #0f0f0f; /* Change the Color according to your choice */
    color: #ffffff;
    width: 100%;
}

.wplogout-footer-bar-fixed span {
    padding-right: 10px;
    font-size: 16px;
}

.wplogout-reading-button {
    border-radius: 50px;
    padding: 5px 10px;
}

body {
    margin-bottom: 50px;    /*  Change to Match with body*/
}

3. Result

This is how sticky floating footer bar look like in GeneratePress Theme

Sticky Floating Footer Bar in GeneratePress theme

Wrapping Up

This is how you can Create Sticky Floating Footer Bar in GeneratePress Theme. Basically, the above code helps to add a short notice, offers, deals, etc on your WordPress website in the quickest and easiest way.

If you have feedback then please feel free to comment below.

Share:
Recommended Reading...

How to Collapse Table of Contents in Rank Math?

How to Add Meta Description as Excerpt in GeneratePress?

How to Add ALT Text to Gravatar Images in GeneratePress?

How to Add Phone Number and Email in GeneratePress Header?

[Fix] Links Do Not Have a Discernible Name in WordPress

How to Switch your WordPress Theme to GeneratePress?

How to Add GenerateBlocks Pattern Library in GeneratePress?

How to Migrate WP Show Posts Plugin to GenerateBlocks?

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, and Blogging. I mostly publish tutorials on GeneratePress, Astra, Kadence, and GenerateBlocks.

30 thoughts on “How to Create Sticky Floating Footer Bar in GeneratePress Theme?”

  1. Hi suraj,
    Your tutorials are great as usual. I visit your website daily to check new content related to Generatepress and other wordpress customizations. Many bloggers don’t share these things for free. You’re sharing it. Also, Share a guide on how to create GDPR based Cookie consent for a blog without any plugin/ external scripts if possible. Stay Blessed Always 🙂

    Reply

  6. Hello, I just want to share my experiment to combine between your floating social share with Floating Footer Bar.The result look like this ibb.co/nB19Wtd

    Reply

    • Hi John,
      I have used hide-on-mobile hide-on-tablet to hide footer bar in mobile and tablet.
      Please remove these classes from the code and test it.
      Thanks

      Reply

      • It not working when I removed hide on mobile and hide on tablet classes from your code and now what the solution of appearing on mobile mode.

        Reply

  9. I need your help!

    It not working when I removed hide on mobile and hide on tablet classes from your code and now what the solution of appearing on mobile mode.

    Reply

    • Hi John,
      I have tested the code again and it is perfectly working on mobile and tablet after removing the hide-on-mobile hide-on-tablet class.
      Please follow the steps without missing any and try it.
      Thanks

      Reply

  10. Hi there, I have copied the Java Script and CSS code from the Notification bar to enable close option. I have aso chaned the class name in Java code to “wplogout-footer-bar-fixed.” But I am unable to se the close option. Please help me in fixing this.

    Reply

  12. Thanks a lot of Bro. I am searching how to make sticky footer ads in Generatepress Theme. Finally I did it with the help of your this article. Once again thanks a lot Dear.

    Reply

  14. Hello Mate,

    Love your post, you did a very good job, i learned too much from you.
    Can you share, how to create the same bar as the top like you in the before_header position?

    Reply

    • Hi Jeff,
      You can use generate_before_header hook to insert the top bar or you can also use Top Bar Widget.
      Thanks

      Reply

Leave a Comment