Adding a sticky header to your WordPress theme
Posted on 21st June, 2014 Leave a Comment
Sticky headers have been popular for quite a while now, I think this is due to the increase in mobile traffic to websites. As pages become narrower they also become much longer, so a sticky-nav is quite a nice thing. I’m sure that there are quite a few of these tutorials online, but for me at least I think this one will be comprehensive enough to cover all your sticky navigational needs.
lets begin by looking at your header.php (I’ll be using my starter theme, link in the sidebar )
header.php
The themes header looks like this;
<body <?php body_class($class); ?>>
<section class="main-header">
<header>
<div class="wrapper">
<?php if ( get_theme_mod( 'header_logo' ) ) :
// If the header logo is set in the theme customizer use that...
?>
<hgroup id="logo">
<a href='<?php bloginfo('url'); ?>/' title='<?php bloginfo('name'); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'header_logo' ) ); ?>' alt='<?php bloginfo('name'); ?>'></a>
<h1><?php bloginfo('name'); ?></h1>
<h2><small><?php bloginfo('description'); ?></small></h2>
</hgroup>
<?php else :
// Otherwise use the default header.
?>
<hgroup id="logo">
<a href='http://localhost/wordpress/' title='WPtricks Testing' rel='home'><img src='<?php bloginfo('template_directory'); ?>/images/logo.png' alt='WPtricks Testing'></a>
<h1><?php bloginfo('name'); ?></h1>
<h2><small><?php bloginfo('description'); ?></small></h2>
</hgroup>
<?php endif; ?>
</div><!-- /.wrapper -->
</header>
<nav>
<div class="wrapper">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' )); ?>
</div><!-- /.wrapper -->
</nav>
</section><!-- /.main-header-->
Above your notice that my header contains a section that holds the logo and navigation, which is perfect for what we want. So to make this stick to the top of the page we just add some CSS to make it fixed.
styles.css
section.main-header {
position: fixed;
width: 100%;
}
The way my theme is built this will just work, you’ll notice the .wrapper class, this will contain the header content at 1100px and center it on the page so won’t need any more work. You on the other hand may need some minor tweaks to with your themes header file.
.wrapper {
position: relative;
max-width: 1100px;
margin: 0 auto;
}
wptricks-starter.js
Next we need to add a margin to the top of our posts section, we’ll use jQuery to calculate the height of the header and use that as the margin. Add the Js where you normally place it in your theme… I’m using a separate JavaScript file, so will use that.
My main content section below the new sticky header (section.main-header) looks like this;
</div><!-- /.wrapper -->
</nav>
</section> <!-- /.main-header -->
<?php
/* Posts and sidebar all contained in the .main-body */
?>
<section class="main-body">
<div class="wrapper">
<div class="left-content">
<article id="post-<?php the_ID(); ?>">
<header>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<p>Posted on <?php the_time('F jS, Y'); ?> by <?php the_author(); ?></p>
</header>
<section>
<?php the_content('Read more on "'.the_title('', '', false).'" »'); ?>
</section>
<footer>
<?php wp_link_pages(array('befo...........
So to push the posts and sidebar down, I’ll add the margin to the following section (section.main-body).
jQuery(document).ready(function($){
// STICKY NAVIGATION
var headerheight = $('section.main-header').height(); // Collect the header height...
$('section.main-body').css('margin-top', headerheight ); // Then use that as the margin.
});
Finally we’ll add a style tag to the header, which will fix our headers position when we are logged in to our site. This is only active when we’re logged in it adds a margin to the sticky header so it clears the WordPress admin bar.
header.php
<head>
/* Place inside your head tags */
<style type="text/css">
<?php if ( is_admin_bar_showing() ) { ?>
section.main-header {margin-top: 32px;} /* height of the admin bar */
<?php } ?>
</style>
/* */
</head>
Congratulations, you’ve just created a sticky header 🙂
Leave a Comment
To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]: