How To Disable Sticky Header And Nav Menu In Altitude Pro

This tutorial shows you where to edit the CSS in the Altitude Pro themes style.css file to disable the sticky header. It also shows you how to remove/disable the jQuery which adds the class for the site-header which changes the header background color on scroll.

Under the Site Header section of the Altitude Pro themes style.css file, change the value for the position property from fixed to absolute like you see in the following CSS rule located on line 975:

.site-header {
	background-color: #000;
	left: 0;
    position: absolute;  /* Edited */
	top: 0;
	width: 100%;
	z-index: 999;
}

That’s basically all you need to do to stop the header being sticky in Altitude Pro.

However, you may also like to remove the dark background from the site header on scroll which you can do by editing the global.js file in the js folder. Simply remove or comment out the following jQuery between lines 3 and 17.

if( $( document ).scrollTop() > 0 ){
	$( '.site-header' ).addClass( 'dark' );			
}

// Add opacity class to site header
$( document ).on('scroll', function(){

    if ( $( document ).scrollTop() > 0 ){
	$( '.site-header' ).addClass( 'dark' );			

} else {
	$( '.site-header' ).removeClass( 'dark' );			
	}

});