Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 28, 2020 at 11:15 am #1178953
    burdeMedia

    Hi guys,
    how can I hide the logo when the page loads and make it appear when I scroll? Exactly the other way as described in this ticket https://kriesi.at/support/topic/hide-logomenu-header-on-scroll-down/

    THX

    January 29, 2020 at 6:33 am #1179291
    Rikard

    Hey burdeMedia,

    Did you try the code which is posted in the thread?

    Best regards,
    Rikard

    January 30, 2020 at 12:30 pm #1179795
    burdeMedia

    Yes, and it does exactly what it is supposed to do. Now I would like that the logo is only displayed when the user scrolls. Before that, the logo should be hidden.

    January 30, 2020 at 2:37 pm #1179881
    Victoria

    Hi burdeMedia,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    January 30, 2020 at 3:03 pm #1179907
    burdeMedia
    This reply has been marked as private.
    January 31, 2020 at 8:48 am #1180176
    Nikko

    Hi burdeMedia,

    Please try to edit the page, then in the sidebar find Header visibility and transparency then select Header is invisible and appears once the users scrolls down .
    Let us know if this helps :)

    Best regards,
    Nikko

    January 31, 2020 at 11:28 am #1180227
    burdeMedia

    That’s working. But that applies to the whole header. I want that only the logo is not visible at the beginning and appears after scrolling.

    January 31, 2020 at 7:25 pm #1180366
    Nikko

    Hi burdeMedia,

    I see, please try adding this code in functions.php:

    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');

    Hope it helps.

    Best regards,
    Nikko

    February 2, 2020 at 2:30 pm #1180664
    burdeMedia

    Nikko thx…
    that’s the right behavior. But it relates to the whole area. Logo including menu items.
    I want it to just be about the image / logo on the left. This should only appear in the yellow bar when you scroll

    https://www.almzeit.de/wp-content/uploads/Schnappschuss_020220_012705_PM.jpg

    February 3, 2020 at 9:27 am #1180797
    Nikko

    Hi burdeMedia,

    The code only includes the logo however the part where it hides the whole header at the beginning is because of this setting: Header visibility and transparency is set to Header is invisible and appears once the users scrolls down, please set it back to No Transparency.

    Best regards,
    Nikko

    February 3, 2020 at 10:26 am #1180811
    burdeMedia

    Ahhh sure….
    Thx! That is working.

    Regards,
    Andy

    February 3, 2020 at 8:53 pm #1181034
    Victoria

    Hi burdeMedia,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 7, 2020 at 12:31 pm #1182289
    burdeMedia

    Hi Guys,
    the whole thing now works for the desktop version. On the smartphone, however, the complete yellow bar disappears after the page has been loaded. How do I get the same settings here as on the desktop version?

    February 10, 2020 at 1:43 pm #1183040
    Nikko

    Hi burdeMedia,

    Try adding this CSS code in Quick CSS:

    @media only screen and (max-width:767px) {
  #header_main,
  .responsive #top #wrap_all .main_menu {
    height: 40px !important;
    top: 0 !important;
  }

  .responsive #top #header_main > .container .main_menu .av-main-nav > li > a, 
  .responsive #top #wrap_all .av-logo-container {
    height: 40px !important;
    line-height: 40px !important;
  }
}

    Best regards,
    Nikko

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