Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #396823

    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

    #396833

    Hi user877!

    Please add following code to Quick CSS

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

    Cheers!
    Yigit

    #396836

    hi yigit,

    that one didnt work.

    My header is setup as logo left – menu right

    #396848

    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

    #396851
    This reply has been marked as private.
    #397349

    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

    #397389

    hi,

    ive added to child theme functions but no change

    #397535

    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

    #397633

    Hi Yigit,

    Thanks for all the contributions!

    This code only made the logo hide on scroll down. The header section and menu remained displayed.

    #397946

    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

    #398343

    Yes, it works beautifully!

    Many thanks.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Hide Logo/Menu header on scroll down’ is closed to new replies.