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…
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.
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.
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
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.
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.
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
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.
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 🙂
Hello Vijay, Thank you for your comment.
Indeed I am using GeneratePress Theme and I fell in love with this theme and I am here creating tutorials for others too.
Soon, I may create a tutorial on GDPR.
Thanks
Update: Here is a tutorial to create cookie notice in WordPress
bhai you are just awesome, Lot’s Of love Dear 💜💜
👍👍
Appreciate this post. Will try it out.
Let us know after trying.
Thanks Suraj! Worked perfectly. I’ve already got GeneratePress Premium but I’ll buy WP Rocket through your link. Cheers
I am happy it’s working for you!!! Cheers
Hello,
How can I create the same bar in before_header position?
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
Thank You for Sharing, Abdul 🙂
Suraj katwal bro it can disappear in mobile mode how to show on mobile?
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
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.
Also i want close button with this footer bar to keep the user experience better.
You can check my notification bar tutorial and implement that on the footer bar tutorial.
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.
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
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.
Hi Mark,
Try using code without changing anything.
Thanks
It’s not working, can you please help me for this?
Hi Mark,
I have tested the code again for you.
The code is working perfectly.
Please try again without missing any steps.
Thanks
I have try that code, but don’t sticky.. I have change nothing.
Hi Niam,
I have tried the code, it is working fine at my end.
Thanks
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.
Can we add ‘Youtube Subscribe’ button in this way ?
Hi ShabdBeej,
You can easily do it.
Thanks
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?
Hi Jeff,
You can use generate_before_header hook to insert the top bar or you can also use Top Bar Widget.
Thanks