How-to make a sticky header or bar in a wordpress theme

Recently we created a sticky header or bar in a wordpress theme for a client and had to do some adjusting to accommodate for the WordPress admin bar so when a user is logged in our sticky header or bar wasn’t in conflict.

This process is really not that hard, as some may think. It also doesn’t require any special kind of plugin.

We will show you how-to accomplish this in just a few simple lines of code.

For this example we will be using the default Bootstrap sticky menu. You can modify this to meet your theme’s needs and or not even use Bootstrap.

First off, open your theme’s header.php file and add this just below the tag.

	<?php if( is_user_logged_in() ) { ?>
		<style type="text/css">.menu-bar{top:32px !important;}.container{margin-top:50px !important;}</style>
	<?php }  elseif( !is_user_logged_in() ) { ?>
		<style type="text/css">.menu-bar{top:0px !important;}.container-header{margin-top:50px !important;}</style>
	<?php } ?>

This should come before the

tag, if using the HTML5 markup, as you should when using Bootstrap.

The default Bootstrap top bar menu is:

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

The container class as in our code example is the container for your content. It could also be a main header area, and you would just need to adjust the class name to such for it to take effect.

Again our code in the header.php file is:

	<?php if( is_user_logged_in() ) { ?>
		<style type="text/css">.menu-bar{top:32px !important;}.container{margin-top:50px !important;}</style>
	<?php }  elseif( !is_user_logged_in() ) { ?>
		<style type="text/css">.menu-bar{top:0px !important;}.container-header{margin-top:50px !important;}</style>
	<?php } ?>

Let’s explain how the code works line by line.

Line 1 – is checking to see if the user is logged in,
Line 2 – and if they are, add some space from the top to accommodate for the size of the WordPress admin bar. It also adds some space for your .container class so your content doesn’t get hidden from the new css rules.
Line 3 – else if they are not logged in
Line 4 – keep the position fixed at the top and keep the same distance for our .content class so it doesn’t get hidden.
Line 5 – Closes our if elsif statement

Remember that when you use position: fixed; in css it removes the item from the document flow.

We hope you enjoyed this article on How-to make a sticky header or bar in a wordpress theme. Please leave your comments and or thoughts below.

Also please be sure to check us out on Facebook at www.facebook.com/MatrixWebDesigners