Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 30, 2020 at 10:06 am #1179748
    royaltask

    Hello, this code worked well for ipad mobile:

    /* hide logo when scroll down */
.header-scrolled .logo, .header-scrolled .av-logo-container { 
display: none!important;
}

    I want to hide the logo after scrolling down. Desktop working with enfold settings. Code does not hide my logo on mobilde landscape. is there a new header id, class? I cant see and open on ipad just desktop. Desktop is hiding logo – mobile not.
    Thank you for your help.

    January 30, 2020 at 11:15 am #1179767
    royaltask

    I found out: .header-scrolled is not switched to when scrolling on mobile ipad 4. Dektop is switching to .header-scrolled when scrolling down. How can I check for scrolling down in ipad?

    February 2, 2020 at 2:09 pm #1180663
    Mike

    Hi,
    Sorry for the late reply, since you were trying to hide the logo on scroll, please give this function a try, it will work for all screens smaller than 1024px, I believe that is the iPad landscape width, but you can adjust to suit.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_hide_logo_script(){
  ?>
  <script>
(function ($) { 
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll >= 20 && width <= 1024) {
    $('.logo').hide();
   } else {
    $('.logo').show();
   }
  });
 })(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'custom_hide_logo_script');

    or if you want to add and remove the header-scrolled class, try this function:

    function custom_header_class_script(){
  ?>
  <script>
(function ($) { 
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll >= 20 && width <= 1024) {
    $('#header').addClass('header-scrolled');
   } else {
    $('#header').removeClass('header-scrolled');
   }
  });
 })(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'custom_header_class_script');

    Best regards,
    Mike

    January 3, 2021 at 3:57 pm #1270052
    baucks

    Hello.

    I also was looking for a solution for this problem and I tried the function custom_hide_logo_script.
    On a desktop everything worked well. The logo shirked und diapeared.
    On my ipad the logo disapeared BUT a blank space remained.
    So I changed the code. I changed $(‘.logo’) to $(‘.av-logo-container’). Now it worked perfect on the ipad (no blank space).
    But on the desktop it worked no more. The logo shinked but remains there.

    Is there a way to combine this two?

    I´m not so familar with php and sorry for my bad english.

    THX

    January 4, 2021 at 1:16 pm #1270132
    Mike

    Hi,

    @baucks     please include a link to your site, and please remove your “custom_hide_logo_script” code.
    So for your iPad you would like the header to be sticky and have the logo disappear on scroll, and you would like this on the desktop version. For mobile do you want the same? If you are hiding the logo on scroll why do you want you show the header, so the burger menu is visible?
    I ask because typically the header takes a lot of space on smaller screens, you might be interested in having the header scroll away when the user scrolls down and have it show when the user starts to scroll up, if you are please see this thread.

    Best regards,
    Mike

    January 4, 2021 at 8:41 pm #1270245
    baucks

    Hi Mike,
    thanks for your reply and for the link.
    The code from Guenni007 is very cool.

    January 5, 2021 at 5:44 am #1270315
    Jordan Shannon

    Hey baucks,

    I’m glad his suggestion was helpful for you!

    Best regards,
    Jordan Shannon

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