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.

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?

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 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:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

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

7 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

Leave a Comment