Hide header until scroll (PRO)

Support
#1

Hi There,

I have two headers, one at the top and one at the bottom that is hidden on every device except mobile. Is there a way in pro to hide the mobile nav until the user scrolls? URL is http://1bf.355.myftpupload.com/

Thanks in advance,

Joe

#2

Hello Joe,

Thanks for writing in! You mobile nav is set to a default static nav.

Please set it as Sticky Bar and then you can make use of this custom css code to hide the mobile nav and will only display once the user scroll the page.

@media(max-width: 979px){
    .x-bar {
        visibility: hidden;
        opacity: 0;
    }

    .x-bar.x-bar-fixed {
        visibility: visible;
        opacity: 1;
    }
}

Hope this helps. Please let us know how it goes.

#3

Hi Rue,

There isn’t an option to select the sticky bar for the bottom bar. Please see attached screenshot

Many thanks,

Joe

#4

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#5

Hi Joao,

I’ve added it to the secure note at the top.

Many thanks,

Joe

#6

Hello Joe,

There is an option to have a sticky bar. You can check it right here:

I went ahead and resolved your issue. Please check your site now.

#7

Hi Rue,

I think you’ve misunderstood what i’m trying to achieve. I’m trying to get the bottom bar (which is in the bottom header section and doesn’t have a sticky option) to appear when the user scrolls down.

So when the user goes to the site on mobile, the header only pops up when the user starts scrolling (remaining at the bottom).

Many thanks,

Joe

#8

Hello Joe,

Sorry for the confusion. Let me check it again. So I went ahead and edited your header. I enabled the bottom bar in desktop screens. And then I when to the customize tab to add a custom ID bottom-bar. In the css section, I added this:

#bottom-bar {
  opacity: 0;
  visibility: hidden;
}

This css code will hide the bottom bar when you load the page. And again, I went to the JS section and I have inserted this code:

(function ($) {
  $(document).ready(function(){
    //var H = $(window).height();
    $(window).scroll(function () {
        
       // set distance user needs to scroll before we start fadeIn
       if ($(this).scrollTop() > 450 ) {
        $('#bottom-bar').css({'opacity': 1, 'visibility': 'visible'});
       } else {
        $('#bottom-bar').css({'opacity': 0, 'visibility': 'hidden'});
       }

    });
  });
}(jQuery));

This code will make sure that as soon as you scroll the page and after 450 pixel height of scrolling, the bottom bar will be visible.

Please check your site now.

#9

That’s perfect, thank you so much for the support.

One last question, where has the CSS and JS code been added? I can’t find it in the style sheet or the customise custom css and javascript section?

Many thanks,

Joe

#10

Hi there,

It’s added in your header’s CSS and javascript. You can find it when you edit your header and there are CSS and JS icons on the left side :slight_smile:

Hope this helps.