• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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' );			
	}

});

Altitude Pro

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags