Using a sticky header WordPress plugin to create animated dynamic headers

Headers are the essential part of most website designs and the first element that comes in focus of the visitor. A unique eye catching header will help to differentiate your website from other sites with standard boring headers. Making the header stick to the top of the screen and adding animated effects that activate on scroll will enhance the user experience even more. In this tutorial we’ll show you how to use a sticky header WordPress plugin to create animated dynamic headers.

A standard WordPress website header

In most WordPress themes, the website header is defined and structured by HTML and PHP code within the opening and closing <header> tags. That code is usually located inside the header.php template file. The standard WordPress website header in most cases contains the site branding and the navigation bar. It can also contain additional elements such as contact information, the search form or any other element depending on the project needs.

From the visual aspect, in most cases the website header section comprises the top area of the screen and it rarely visually stands out. As soon as the visitor starts scrolling, the header section disappears off the screen. The goal of this tutorial is to show you how to customize the standard boring header into a visually attractive and functional header with additional features that will add some dynamics to it. To achieve that goal we’ll need the help of a sticky header WordPress plugin and a bit of custom CSS code.

The myStickymenu sticky header WordPress plugin

In this tutorial, we’ll use some features of the myStickymenu by Premio sticky header WordPress plugin. This quite popular plugin has over 90.000 active installations and a 5.0 average vote among over 400 WordPress developers. The myStickymenu is very lightweight, and it generates only 2 server requests. That means it won’t affect your website’s loading speed significantly. This plugin is available for free download in the WordPress Plugins Repository.

Maybe you’re asking yourself why should we use a sticky header WordPress plugin when we can make the header stick to the top of the screen using the position: fixed; CSS property. The answer lies in a feature of the myStickymenu plugin that adds a wrapping div element around the <header> section that changes it’s class depending on the scroll bar position. The header wrapping div has a different CSS class when the screen is in the absolute top position and a different class when we start scrolling. We’ll use that feature to differently style our dynamic header in those positions and add CSS animations to it.

Before we move on, now is the time to install and configure the myStickymenu sticky header WordPress plugin.

Download the Plugin

Configuring the myStickymenu sticky header WordPress plugin

Upon installation, the myStickymenu sticky header WordPress plugin gets it’s own settings button in the WordPress Dashboard’s left column menu. Configuring the plugin is simple and quick, with only a couple of options to customize.

The most important option to configure is the “Sticky Class”, where you have to enter your <header> section HTML class or ID. So firstly, use a code editor or your browser’s property inspector to find out the header section class or ID. Most WordPress themes commonly use the class “.site-header” and the ID “#masthead” for the header.

Here’s an example of a commonly used WordPress header opening tag:

<header id=”masthead” class=”site-header”>

Once you figured out your theme’s header class or ID, enter it in CSS format (using dot for class or hash for ID) in the myStickymenu settings “Sticky Class” field and save the changes. If you’ve done everything correctly, after you refresh your browser, the website header should stick to the top of the screen when you start scrolling. You should probably notice a discreet animation when the now dynamic header changes it’s state.

Defining your theme’s header CSS class or ID is the essential step to make the myStickymenu plugin work properly.

The myStickymenu sticky header WordPress plugin has a couple of additional settings which customization is optional. You might want to configure the Transition time, Sticky state opacity and color, Animation type or some other options. We suggest using the fading animation type instead of sliding.

Using the myStickymenu additional classes to create animated dynamic headers

The most important feature of the myStickymenu sticky header WordPress plugin are the additional CSS classes we’re going to use to style our dynamic header differently in the initial state and the scrolling state. As we mentioned earlier, this plugin wraps the <header> section with a div that changes it’s class depending on the scroll bar position.

When the screen is in the absolute top position, our header section is wrapped with a div with the ID “mysticky-nav” and the class “up”. As soon as we start scrolling down, the myStickymenu sticky header WordPress plugin will change the class of the “mysticky-nav” div to “wrapfixed down”.

Notice the div element wrapping the header section generated by the myStickymenu plugin. The class of the wrapping div changes as the visitor starts scrolling down.

The whole idea of creating an animated dynamic header is to use the “wrapfixed” class to style our header differently than the default look when we start scrolling down. In our example we’ll make the default header section shrink when we start scrolling. That’s a very nice and functional visual enhancement that keeps the header on the top of the screen, but it changes it’s size to occupy less screen space.

Here are some examples of CSS properties that can be used to customize your dynamic header:

/* Reducing header size by changing padding */

.header-inner {
        padding: 30px;
        transition: padding 0.5s ;
}

.wrapfixed .header-inner { padding: 15px; }

/* Reducing the logo size */

.header-logo img {
        max-width: 200px;
        transition: max-width 0.5s ;
}

.wrapfixed .header-logo img { max-width: 150px; }

/* Reducing the navigation menu size */

.primary-menu a {
    font-size: 20px;
    margin: 0 10px;
    transition: font-size 0.5s, margin 0.5s ;
}

.wrapfixed .primary-menu a {
    font-size: 16px;
    margin: 0 5px; 
}

Animated dynamic header CSS properties explained

In the example above, firstly we’ve set the header’s absolute top position default values for padding, logo size and navigation bar buttons. There’s no need to use additional CSS classes for the top position. Then we reduced the default values of those CSS properties for the case when the myStickymenu sticky header WordPress plugin adds the “wrapfixed” class to the div wrapping the header. In other words, the predefined CSS properties will change their values as soon as we start scrolling. Additionally, we used the transition CSS property to achieve a nice animated effect when changing the values. Otherwise, the change would be instantaneous.

The CSS classes we used in our example to target the header inner section, the logo image and the navigation buttons may vary from theme to theme. Use the property inspector to check which CSS classes are used by your theme to target those elements.

In this example we showed you the basic principle of creating dynamic headers with the help of the myStickymenu sticky header WordPress plugin. Now you can furtherly enhance your dynamic header by modifying the look of any other HTML element your header uses. You can even show or hide some elements depending on the header state. The possibilities are extensive and limited only by your imagination and knowledge of HTML and CSS.

Now that you learned how to create visually attractive dynamic headers, you can move on and discover the possibilities of using Sticky sidebars in WordPress.

To find out more creative ways to customize website headers in WordPress, check out the following tutorials:

• Creating multiple headers in WordPress
• Using video headers in WordPress