Hosting Tutorial & Guide

How to Create Sticky Header and Footer Bar in WordPress

updated on Aug 19, 2016
How to Create Sticky Header and Footer Bar in WordPress Sticky header and sticky footer bar are popular nowadays due to their great usability. Many large sites like Facebook and CNN have used one or both of them to reduce the bounce rate, increase page views, and make the website navigation easier. Therefore, the user experience can be enhanced.

In addition, sticky headers help much in better branding since you can add your website name and brand logo in them. And a sticky footer bar is important for directing visitors to a certain page on your website. This page could include a coupon for your popular service, a signup form, or any other content that converts.

In below, we will show how to add a sticky header and footer bar to a WordPress site by using the rich-featured WordPress plugins.

Create a Sticky Header in WordPress

Sticky Header by ThematoSoup is an easy-to-use sticky header plugin which is completely free. Using this plugin, you don't have to deal with numerous settings, and instead, only a few options are open to you. However, there is one thing to note. You must make sure you have created at least one navigation menu on your WordPress site.

The plugin doesn't add any new menu item to the WordPress admin area. After installing the plugin, you can find it in the built-in WordPress theme customizer which is located in Appearance > Customize.

WordPress Theme Customizer

Clicking on "Sticky Header by ThematoSoup", you will get to the options you need to handle. To make a navigation menu sticky, you need to complete the following steps.
  • Upload a brand logo to the sticky header. The image height is suggested to be 30px. If no logo is uploaded, the plugin will use your site name.
  • Select a navigation menu that you'd like to make sticky. Only the first level menu items will be displayed.
  • Select a background color of the sticky header bar.
  • Select a color for all the texts in the sticky header. Enough color contrast is suggested.
  • Specify the header width.
  • Define when the sticky header shows up.
  • Specify the width of the screen on which the sticky header will display. Your visitors who use smaller screens will not be able to see the sticky header.
When you deal with these options, a live preview is presented to you on the right side of the screen, so you can try and test until you are satisfied with the display of the sticky header.

Create a Sticky Header in WordPress

As the theme customizer provides multiple screen sizes for tests, you can check the display of the sticky header on different devices easily.

Test Sticky Header

After making sure everything is great, you can click on the "Save & Publish" button in the theme customizer to get the sticky header published. Then, visit your website to test it in action. If there is anything unsatisfactory, go back to the customizer to make further modifications.

Create a Sticky Footer Bar in WordPress

A sticky floating footer bar allows you to show your readers whatever you want to highlight, so it is helpful in promoting your products or posts. Your readers' attention can be easily drawn to the content you want them to see.

There are several plugin options for adding a sticky footer bar to a WordPress site, among which Simple Sticky Footer is a great one. This plugin is lightweight and simple-to-use.

To make use of the plugin, you first need to decide what you want to promote with the sticky footer bar, and then create a page for the content. The page title could be anything that you can identify.

After doing so, install and active Simple Sticky Footer on your WordPress site. Then, access the plugin configuration by going to Appearance > Sticky Footer.

On the configuration page, the only thing you are required to do is to select the page that you will promote with the footer bar. However, there are several optional settings with which you are able to:
  • Set the width of the sticky footer bar.
  • Choose an animation effect that matches your website design.
  • Define a delay (in seconds) for the sticky footer to show up.
  • Add additional CSS rules to customize the appearance of the sticky footer.
Configure Simple Sticky Footer

When the settings are saved, a sticky footer bar will appear on your WordPress site with the style you like.

Create Sticky Footer Bar in WordPress

By default, the footer bar is used site-wide, which means it is available on all the pages on your website. You may not like this because it is better not to show this footer on some important pages like the homepage and category page. Fortunately, the plugin comes with a feature that enables you not to distract visitors from the important content on your site.

On the configuration page of the plugin, there is an option for enabling shortcodes. When the option is checked, the sticky footer will not show up on any page unless you add the shortcode [simple_sf pid=900] to the page. "900" in the shortcode refers to the id of the page that you promote with the sticky header.

With this shortcode, you can fully control on which pages the sticky footer will be shown.

Enable Sticky Footer Shortcode