Make the Header ‘Sticky’

Last Reviewed: 2-May-15 (3.3.20) 3.1.* 3.2.* 3.3.*

Customizr introduced built-in feature changes in v3.2. Go to Customize>Header>Design and layout. Adjust the STICKY HEADER SETTINGS.

HD0010_Design_Layout

3.1/3.2 code

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

/* START OF Make the Header ‘Sticky’ */
/* Make Header 'Sticky' */
.tc-header {
position:           fixed;
top:                0px;
background-color:   #fff;
z-index:            100;
width:              100%;
max-height:         120px;
}
body {
padding-top:        120px;
}
/* END OF Make the Header ‘Sticky’ */

Credit: @neryba/@rdellconsulting/@d4z_c0nf

A side-effect of this snippet occurs if you use anchor tags (#) to traverse your page, usually from the Menu.
You may find that the position of the page is displaced by the height of the fixed header.Rocco (@d4z_c0nf) has worked tirelessly with me to produce a Javascript solution.

Step 1

Create a new folder, preferably within a Child Theme, called js. The resulting structure will look like:
/wp-content/themes/customizr-child/js

Step 2

Create a blank file in this folder, anchors-script.js. With a suitable editor, cut & paste the next snippet and save.

jQuery(document).ready(function(){ 
	!function ($) {
		//prevents js conflicts
		"use strict";
		function go_to_anchor( target ){
			var offset = parseInt($('body').css('paddingTop'));
			$('html, body').animate({
			   'scrollTop': $(target).offset().top-offset 
			}, 700, 'swing' );
			return false;
		}
		
		$('a[href*="#"]').on('click',function (e) {
			    if ( $(this).attr('data-toggle') || ! this.hash ||
                $(this).hasClass("carousel-control") ){
				return;
			}

			e.preventDefault();
			var target = $(this).attr('href');
			
			if ( target.indexOf(this.hash) != 0 )
				window.location = target;

			return go_to_anchor(this.hash);    
		});

		if ( window.location.hash ){
			return go_to_anchor('#' + window.location.hash.slice(1));
		}
	}(window.jQuery);
});

Step 3

Add the following snippet to your Child Theme functions.php

// START OF Fix Anchors for Fixed Header
add_action('wp_enqueue_scripts', 'add_anchors_script', 150);
function add_anchors_script() {
    if (is_page(array('5'))) {
        wp_enqueue_script('anchors_script', get_stylesheet_directory_uri().'/js/anchors-script.js', array('jquery') , null , true);
        }
    }
// END OF Fix Anchors for Fixed Header

Step 4

Measure the height of the sticky header, ignoring the grey bar (unless you hid it). Now adjust the old snippet, if necessary

/* START OF Make the Header ‘Sticky’ */
/* Make Header 'Sticky' */
.tc-header {
position:           fixed;
top:                0px;
background-color:   #fff;
z-index:            100;
width:              100%;
max-height:         120px; /* Adjust to height of sticky header */
}
body {
padding-top:        120px; /* Adjust to height of sticky header */
}

/* Margin/Background  */
#main-wrapper       {
margin-top:         -20px; /* Adjust if needed */
}
/* END OF Make the Header ‘Sticky’ */

Credit: @rdellconsulting/@d4z_c0nf
And all should be well in the world of sticky headers 😉

51 thoughts on “Make the Header ‘Sticky’”

Comments are closed.