Okay
  Public Ticket #1319544
Hide logo in menu until scrolling
Closed

Comments

  • barnabyandersun started the conversation

    Hi, how can I hide the logo in the sticky nav bar, until you start scrolling down the page?

    As you can see from my temporary URL, I've got the site logo on the loading screen, so it is not needed in the nav bar, until you start scrolling. So, how could it be hidden until you start moving down the page?

    Thank you, Barnaby

  • [deleted] replied

    Hello,

    Unfortunately there is no such option in the theme settings. In this case try to use the following custom js code:

    jQuery(window).scroll(function() {
        if ($(this).scrollTop()>0) {
            jQuery('.starting-logo').fadeOut();
         }
        else {
          jQuery('.starting-logo').fadeIn();
         }
     });

    To add the js code you can use the "Custom CSS and Javascript" plugin.

    Regards.

  • barnabyandersun replied

    Thank, that is good... but you got it the reverse. I want the logo to be not-visible upon loading, and only to be visible upon scrolling. Your code is the reverse of what I need.

    Please see - https://www.ankorus.org

    So I reversed your code, and it almost works... except the logo is visible when the page first loads. I need it to be invisible when it loads, and then to become visible upon scrolling. How do I make this change?

    jQuery(window).scroll(function() {
        if ($(this).scrollTop()>0) {
            jQuery('.starting-logo').fadeIn();
         }
        else {
          jQuery('.starting-logo').fadeOut();
         }
     });



  • [deleted] replied

    Hello,

    Change previous js code with this one:

    jQuery(function(){  
      $('.starting-logo').hide();
      $(window).scroll(function() {
        if ($(this).scrollTop()>0) {
            $('.starting-logo').fadeIn();
         }
        else {
          $('.starting-logo').fadeOut();
         }
     });
    });

    Regards.

  • barnabyandersun replied

    Thank you! That's really great... on desktops.

    If you check www.Ankorus.org on your mobile...
    there is a double logo that appears when you start scrolling down the page. Is there anyway to make your script only work on desktops, and not on mobiles?

    Thanks so much for your help

  • [deleted] replied

    Hello,

    Try this code variation

    jQuery(function(){
      if ($(window).width() > 992) {
        $('.starting-logo').hide();
        $(window).scroll(function() {
          if ($(this).scrollTop()>0) {
              $('.starting-logo').fadeIn();
           }
          else {
            $('.starting-logo').fadeOut();
           }
           });
      }    
    });

    Regards.

  • barnabyandersun replied

    That fixed everything! Thank you so much. There was a caching issue on my iPhone, but now it's loading perfectly. Your solution made everything work :))
    I really appreciate your help.

  • [deleted] replied

    You are welcome.

    Regards.

  • barnabyandersun replied

    I realise I need one more bit of help with this animation. How can it be applied to only the home page?

    I want the other pages in the site to behave normally, with the logo in the nav bar, but not on the home page.
    www.ankorus.org

    What can be done?

    Thank you

  • [deleted] replied

    Hello,

    Use this js code to hide the logo on home page only

    jQuery(function(){
      if ($(window).width() > 992) {
        $('.home .starting-logo').hide();
        $(window).scroll(function() {
          if ($(this).scrollTop()>0) {
              $('.home .starting-logo').fadeIn();
           }
          else {
            $('.home .starting-logo').fadeOut();
           }
           });
      }    
    });

    Regards.

  • barnabyandersun replied

    This is all working really well! Thank you.

    Is there anyway to have another piece of code (a language WPML drop down menu) appear in the logos place only when the logo is vanished?

    So, to swap out the logo at the top of screen, before you scroll, and in it's place show some language options?

    How could this be done?

    Many thanks

  • [deleted] replied

    Hello,

    Please note, we don't have customization service. Previous code was provided to you as an exception. We recommend to hire a specialist to make all customizations you want on your site. Thank you for understanding.

    Regards.