Sticky Header

[Kaushal Sinha]

Disabling sticky header option works great on home page upon scrolling, but it does not work on subsequent pages. How can I enable sticky header so that the header and navigation bar is available on all pages upon scrolling?

[Sonnal S Sinha]

On inner pages no sticky header is provided. It doesn’t stick to the top while scrolling. The purpose is for lengthy pages which is the homepage we had the header sticky.

If you still need it send us credentials of the site via email: [email protected]

Regards,
Shri

[Frederic Desclos]

I don’t know about Kaushal, but as previously mentionned, I would need that funtionnality…

[Kaushal Sinha]

I need the sticky header menu on all pages. My pages are much more longer the screen and it scrolls and it makes it odd to scroll up everytime a user needs to access the menu.

Shri: Please provide us with exact option to enable this. Seems like this option is more and more in demand and should have been enabled to begin with. Not sure why any themes would not have sticky header menu for subsequent pages.

Will wait for prompt response. Thank you Shri.

[Frederic Desclos]

Here is how I dealt with it :

I’m using a child theme. In the child theme function.php I added the following :

function dcs_media_css_hook(){
	
	?>
    	
    	<script>

			jQuery(window).bind('scroll', function() {
				<?php  if ( is_home() || is_front_page() ) {?>
					var navHeight = jQuery( window ).height() - 0;
				<?php } else { ?>
					var navHeight = 90;
				<?php } ?>
		<?php if( of_get_option('headstick',true) != true) { ?>
		if (jQuery(window).scrollTop() > navHeight) {
			jQuery('body.home .header').addClass('fixed');
			jQuery('body.page .header').addClass('fixed');
			jQuery('body.single .header').addClass('fixed');
			jQuery('body.archive .header').addClass('fixed');
			jQuery('body.category .header').addClass('fixed');
		}else {
			jQuery('body.home .header').removeClass('fixed');
			jQuery('body.page .header').removeClass('fixed');
			jQuery('body.single .header').removeClass('fixed');
			jQuery('body.archive .header').removeClass('fixed');
			jQuery('body.category .header').removeClass('fixed');
		}
		<?php } ?>
});
			jQuery.noConflict();
			jQuery(window).load(function() {
        jQuery('#slider').nivoSlider({
        	effect:'<?php echo of_get_option('slideefect','fade'); ?>', //sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse
		  	animSpeed: <?php echo of_get_option('slideanim',500); ?>,
			pauseTime: <?php echo of_get_option('slidepause',3000); ?>,
			directionNav: <?php echo of_get_option('slidenav','true'); ?>,
			controlNav: <?php echo of_get_option('slidepage','true'); ?>,
			pauseOnHover: <?php echo of_get_option('slidepausehover','false'); ?>,
    });
});
		</script>
    <?php
		
	}

function remove_sticky_parent_actions() {
	remove_action('wp_head','media_css_hook');
}

add_action ('init','remove_sticky_parent_actions');

add_action('wp_head','dcs_media_css_hook');

[Sonnal S Sinha]

Thanks for sharing the info.

Regards,
Shri

[Kaushal Sinha]

I am not sure where I go about modifying this and what line number or point of entry?

Shri: You should seriously consider giving your customers an option of enabling and disabling sticky header on subsequent pages in your next update.

I am surprised this is not enabled in subsequent pages. Maybe I will look at other themes who do offer this option down the road.

[Frederic Desclos]

Just add this to the function.php of your child theme

[Kaushal Sinha]

I don’t have child theme. I am assuming I should add to the main theme

[Kaushal Sinha]

…and am I replacing any code or where am I inserting your mentioned code to? I not too familiar with codes and such. Thanks

[Frederic Desclos]

Yes, you should search for the function media_css_hook (around line 173 to 206) ad replace it with the code I provided.

[Kaushal Sinha]

OK. Will look into this and update you on the end result.

Thanks a bunch

[Kaushal Sinha]

OK. I did exactly as you mentioned but I see no difference. Nav menu bar scrolls out of the screen when I am scrolling down on the subsequent pages.

What did I do wrong?

[Sonnal S Sinha]

@Kaushal: Which theme are you using? Will add the enable disable rather than doing this for sticky header.

Regards,
Shri

[Kaushal Sinha]

SKT White Pro

[Author]

Posts