How To Create Sticky Floating Footer Bar in GeneratePress Theme

| | In Blogging

Are You looking to create a sticky floating footer bar in the GeneratePress premium theme in 2022?

If yes, then you are on the right web page.

GeneratePress is the most premium WordPress theme in the market with zero bad things. You can create any type of website using the GeneratePress premium WordPress theme.

And creating a sticky footer bar is also one thing you can easily make in the GeneratePress theme.

You can customize the footer bar according to your needs and can add your URL in the button box. You can also edit and change the color of the button and can change the background color as well.

Here is the full video on “How to Create Floating Sticky Footer Bar in GeneratePress premium theme”.

To create this type of footer bar you need some codes and CSS. Here is the code which you need to paste on the hook elements.

Add a Hook to Create Fixed Footer Bar

<div class="wpbloggerbasic-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="wpbloggerbasic-reading-button">Join Facebook Group</button></a>
    </div>
</div>

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

Click on publish button.

Style the Sticky 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.

.wpbloggerbasic-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%;
}

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

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

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

This footer bar will not show on mobile or tablet devices as it is hidden in the hook element code.

Related Reads:-

You can see the results in the video and all the details are given in the above-mentioned video. If you like the video please don’t forget to subscribe to the channel.

This is how you can Create Sticky Floating Footer Bar in GeneratePress Theme. If you have any doubt, let me know in the comments section.

Leave a Comment