Create a Sticky Header Bar: A MakeUseOf Style Tutorial

Implementing a Sticky Header Bar

Approximately one month ago, a new interface feature was launched on MakeUseOf – a persistent navigation and search bar that remains visible as users scroll. The response from our audience has been overwhelmingly favorable.

We’ve observed a significant increase in internal search traffic since its implementation. Furthermore, several readers have inquired about the process of creating a similar feature for their own websites, prompting this guide.

Utilizing jQuery for Functionality

The implementation relies on the jQuery library to ensure the bar remains fixed to the top of the viewport. However, this functionality is only activated once the user has scrolled past a designated point on the page.

This tutorial will demonstrate the process within the default WordPress theme, Twenty Eleven. It’s important to note that the principles can be adapted for use with any theme or website, provided you possess a working knowledge of its modification procedures.

jQuery will be central to achieving the desired effect of a fixed header.

Applying the Technique to WordPress

While the demonstration focuses on Twenty Eleven, the core concepts are transferable. Successful implementation requires a basic understanding of how to customize your chosen theme’s files.

The goal is to create a user experience where the navigation remains readily accessible, even during extensive scrolling. This enhances site usability and encourages further exploration.

The sticky header improves navigation.
It boosts internal search usage.

Creating a Sticky Header in WordPress

To begin, locate and open the header.php file within your theme's directory. The goal is to identify the navigation bar that will be transformed into a sticky element. Keep in mind that the following code examples are based on the default Twenty Eleven theme; your theme's structure may differ.

Locating the Navigation Bar

The initial navigation bar code typically appears as follows:

<nav id="access" role="navigation">

The next step involves enclosing this entire NAV section within a new DIV container.

Adding a Container

Wrap the existing navigation code with the following structure:

<div id="access_container">
<nav id="access" role="navigation">
...
</nav>
</div>

Furthermore, the default search bar should be integrated into this new container. It's usually positioned in the top right corner of the theme by default.

Integrating the Search Form

Find the line <?php get_search_form();?> and paste it into the navigation section you've created. Ensure that you remove any other instances of this code from the header.php file.

Upon saving and refreshing the page, you might observe that the search form hasn't yet moved to the navigation bar. This is due to existing CSS positioning that needs to be addressed.

The search form's current location is maintained through absolute CSS positioning, which will be removed in the subsequent steps.

Modifying the CSS

Begin by accessing the primary style.css file and locating the segment dedicated to the search form.

This section is typically defined as follows:

#branding #searchform { ... }

The existing code within this block, which likely spans around four lines and includes absolute positioning declarations, should be superseded by the following code snippet:

#branding #searchform { float:left; background:white; margin:7px ; }

Customization is encouraged. Adjust the background color or margin values to suit your design preferences.

The positioning of the search form can also be altered; changing the float property will move it to the right side of the bar if desired.

Notably, this theme incorporates a feature where the search input expands upon user interaction.

While this functionality is beyond the scope of this guide, a comparable implementation can be observed on the MakeUseOf Search feature.

jQuery for Sticky Headers

The necessity of utilizing jQuery for this implementation stems from the inherent limitations of CSS. CSS, while powerful for styling, lacks the dynamic adjustment capabilities required for a truly responsive sticky header. A purely CSS-based solution would necessitate the menu being positioned as the very first element on the page.

However, when the menu isn't the initial element, a different approach is needed. This is where jQuery proves invaluable. It allows us to monitor the user's scroll position and, based on that, dynamically apply the "sticky" behavior – making the header fixed only when the user scrolls past a designated point.

Adding jQuery to Your Theme

Begin by ensuring jQuery is included in your theme's setup. It's possible your theme already incorporates it. If not, several methods are available.

You can enqueue jQuery by adding the following code snippet to your functions.php file:


function my_scripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

Alternatively, you can directly integrate jQuery into your theme's header file, bypassing the WordPress enqueue system. Simply add this line within the section:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

If you choose the enqueue method, jQuery will be loaded in noConflict mode. This requires using "jQuery" instead of "$" to access jQuery functions. The direct header inclusion allows the standard "$" accessor.

Implementing the Sticky Header Code

To implement the sticky header functionality, insert the following jQuery code at the end of your header.php file – ideally just before the <div id="main"> element:

<script type="text/javascript">
//make the nav sticky
var stickyHeader = $('#access_alias').offset().top+288;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeader ) {
$('#access').css({position: 'fixed', top: '0px'});
} else {
$('#access').css({position: 'static', top: '0px'});
}
});
</script>

The script initially determines the starting position of the navigation bar and stores this value. Then, it attaches a function to the scroll event. This function executes whenever the user scrolls the page.

The function then operates in one of two ways:

If the user has scrolled past the navigation bar, the script applies a fixed CSS position, creating the "sticky" effect.
If the user scrolls back up, so that the top of the window is above the navigation bar's original position, the script reverts to the default static positioning.

Important Considerations

Two specific points warrant attention:

The "+288" value is included to correct a positioning bug. Without it, the sticky effect may trigger prematurely. Removing it will demonstrate the issue. This adjustment may not be necessary for all themes, and a more tailored solution might be preferable.
To address potential width changes in the navigation bar when it becomes sticky, modify your style.css file. Locate line 550 and change the value from 100% to 1000px.

With these steps completed, your navigation bar should now function as a sticky header, enhancing user experience.

Resources and Support

The complete header.php code utilized throughout this guide is available on Pastebin for easy access. Similarly, the modified style.css file can be found at the provided link.

It is my sincere hope that you found this tutorial beneficial. Should you encounter any difficulties during implementation, please don't hesitate to leave a comment detailing your issue.

Seeking Assistance

When requesting help, kindly ensure your website is publicly accessible. This will allow for direct inspection and a more efficient troubleshooting process.

Further Exploration

For those new to this resource, a comprehensive collection of articles covering Blogger and general web development topics is readily available for your review.

Explore our extensive library of Blogger tutorials.
Discover insights into various web development techniques.

We are committed to providing valuable resources to support your online endeavors. Continued learning is key to success in the ever-evolving digital landscape.

Topics

More