Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1428523

    Dear support,
    is it possible to hide the logo when the page is scrolled?

    #1428540

    Hi dondela,

    It’s possible, however, you will need to enable Shrinking Header in order to achieve it.

    Best regards,
    Nikko

    #1428572

    Thanks for your help: I enabled the shrinking header: How can i hide the logo when the page is scrolled now?

    #1428573

    oh wow – did not see that you are only asking for the logo hide/show !
    so forget about my solution – which is meant for hide/show complete header – sorry

    _________ so this is not for your problem ____________

    yes, this is a possibility – but has the disadvantage that this class (header-scrolled) is only removed if you are in the top position on the page. This means that the header only appears again then. If you scroll-direction is up at the bottom (or middle) of a page, nothing happens.
    It would therefore be better to have a class that is removed as soon as a certain distance is scrolled back – and thus restores the header visibility.

    This is a function adding a class (hide-header) depending on scroll distance.

    function hide_header(){
    ?>
    <script>
    (function($){
    
      'use strict';
      var c, 
      currentScrollTop = 0,
      header = $('#header');
    
       $(window).on('scroll', function () {
          var a = $(window).scrollTop();
          var b = header.height();
          currentScrollTop = a;
    
          if (c < currentScrollTop && a > b  ) {
            header.addClass("hide-header");
          } else if (c > currentScrollTop && !(a <= b)) {
            header.removeClass("hide-header");
          }
          c = currentScrollTop;
      });
    })(jQuery);   
    </script>
    <?php
    }
    add_action('wp_footer', 'hide_header');
    

    The css you need on that must reflect your header height you set on Enfold options. And the options – f.e. if you have a top-menu or phone-info field above the header. And if it scrolls away.

    The trick now is to shift the header in y-direction above the viewport.
    And because we do not want to do that if the burger menu is opend – we exclaim it bei not selector ( :not(.av-burger-overlay-active) )
    The media query settings are individual – and you have to adjust it to your needs – if you got pages with transparency headers – maybe there had to be different padding-top settings of #main.

    css – first settings:

    
    .responsive:not(.av-burger-overlay-active) #header {
      top: 0px;
      -webkit-transition: transform 0.5s ease-in;
      transition: transform 0.5s ease-in;
    }
    
    .responsive:not(.av-burger-overlay-active) #header.hide-header {
      -webkit-transition: transform 0.5s ease-in;
      transition: transform 0.5s ease-in;
    }
    
    .responsive:not(.av-burger-overlay-active) #main {
      top: 0px;
      -webkit-transition: padding-top 0.5s ease-in;
      transition: padding-top 0.5s ease-in;
    }
    
    .responsive.av-burger-overlay-active #header {
      position: fixed !important;
    }
    
    @media only screen and (min-width: 990px) {
      .responsive:not(.av-burger-overlay-active) #header.hide-header {
         transform: translateY(-116px);
      }
    }
    
    @media only screen and (min-width: 768px) and (max-width: 989px) {
      .responsive:not(.av-burger-overlay-active) #header {
        position: fixed !important;
        top: 0;
      }
      .responsive:not(.av-burger-overlay-active) #header.hide-header {
         transform: translateY(-90px);
      }
      .responsive #top #main {
         padding-top: 90px !important;
      }
    }
    
    @media only screen and (max-width: 767px) {
      .responsive:not(.av-burger-overlay-active) #header {
        position: fixed !important;
        top: 0;
      }
      .responsive:not(.av-burger-overlay-active) #header.hide-header {
         transform: translateY(-80px);
      }
      .responsive #top #main {
         padding-top: 80px !important;
      }
    }
    #1428574

    Your setting only makes sense – if the header stays fixed on responsive case. So on the css above it is set to fixed
    the 116px is the standard setting of header hight on setting: large

    – if you got this “Reading Progress Bar” active it might be a decision to show it on scroll or not – that makes only a difference in translate-y amount.

    see: https://enfold.webers-webdesign.de/

    now there must be a setting for burger active …
    best would be to show the header always ( because burger-menu and hamburger icon are part of the header )

    .responsive.av-burger-overlay-active #header {
      position: fixed !important;
    }

    PS: you see on the css above that the media queries rules are the same (in this case) – but it might be different on your settings – f.e. to have a smaller header hight on screens less than 768px.

    #1428585

    Hi,

    Please see @guenni007’s reply.

    If you’d like to set the opacity of the logo to zero when scrolled down, please add the following code to the Quick CSS field in the Enfold theme options > General Styling:

    
    .header-scrolled-full .logo {
      opacity: 0;
    }
    


    @guenni007
    Thanks for your help!

    Best regards,
    Yigit

    #1428586

    oh wow – did not see that you are only asking for the logo hide/show !
    so forget about my solution – which is meant for hide/show complete header – sorry

    and if you like to have the benefit of those classes added on scroll – without having a shrink see:

    https://kriesi.at/support/topic/how-to-set-a-very-small-shrink-factor/#post-1416772

    #1428612

    Wow Guenni007 and Yigit, thank you so much for sharing your solution!
    I will test this tomorrow with my side and give some more feedback after.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.