Hide Logo/Menu header on scroll down

Hi user877!

Please add following code to Quick CSS

.header-scrolled nav.main_menu { opacity: 0; }

Cheers!
Yigit

Hi!

Please try adding !important rule as following

.header-scrolled nav.main_menu { opacity: 0 !important; }

It does work fine on my local installation. If that code too does not help, please post the link to your website.

Best regards,
Yigit

Hey!

You can try this on functions.php to hide the logo on scroll:

add_action('wp_footer', 'ava_scroll_hide_logo');
function ava_scroll_hide_logo(){
?>
<script>
(function($){
		var calc_scroll = function() {
			var header = $('#header').height(),
			    scroll = $(window).scrollTop();
				if(scroll >= header) {
					$('.logo').css('display', 'none');
				} else {
					$('.logo').css('display', 'block');
				}
		}

		$(window).scroll(function() {
			calc_scroll();
		});
})(jQuery);
</script>
<?php
}

Best regards,
Ismael

Hi!

Please try this code instead

function add_hide_logo(){
?>
<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 200) jQuery('.logo').fadeOut('slow');
if(jQuery(this).scrollTop() < 200) jQuery('.logo').fadeIn('slow');
});
</script>
<?php
}
add_action('wp_footer', 'add_hide_logo');

Regards,
Yigit

Hey!

Please try the following instead:

function add_hide_header(){
?>
<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 200) jQuery('#header_main').fadeOut('slow');
if(jQuery(this).scrollTop() < 200) jQuery('#header_main').fadeIn('slow');
});
</script>
<?php
}
add_action('wp_footer', 'add_hide_header');

Cheers!
Rikard