Make the Header ‘Sticky’

3.1/3.2 code

/* 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

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 😉