Hi,
Is it possible to hide the header menu when scrolling down. Enfold has a feature to show this when scrolling down. I would like the reverse of this.
Thanks
Hi user877!
Please add following code to Quick CSS
.header-scrolled nav.main_menu { opacity: 0; }
Cheers!
Yigit
hi yigit,
that one didnt work.
My header is setup as logo left – menu right
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,
ive added to child theme functions but no change
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
Hi Yigit,
Thanks for all the contributions!
This code only made the logo hide on scroll down. The header section and menu remained displayed.
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
Yes, it works beautifully!
Many thanks.
The topic ‘Hide Logo/Menu header on scroll down’ is closed to new replies.