Docs

[Sam]

I managed to create a transparent header with masthead set to 0 but I would like the logo and menu to disappear once user scrolls up.

Is this possible?

[Paul R]

Hi,

Thanks for writing in!

You can add this under Custom > Edit Global CSS in the Customizer.

.x-navbar.x-navbar-fixed-top {
   display:none;
}

Hope that helps.

[Sam]

Hi Paul,

This removes the navbar completely. Is this expected?

[Jade]

Hi Sam,

Would you mind sharing your site URL so that we could take a better look at it?

Thank you.

[Sam]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. Let’s use the solution below.

#1. You can add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');

    if (scrollPos > 100) {
      navbar.addClass('hide-navbar');
    } else {
      navbar.removeClass('hide-navbar');
    }
  });
});

#2. Then add this under Custom > CSS in the Customizer.

.x-navbar {
  transition: all 0.2s ease 0s;
}
.x-navbar.hide-navbar {
  opacity: 0;
}

Hope this helps.

[Sam]

Hi Jade and Rupok,

Thanks for your awesome support.

Works like a charm.

[Thai]

Glad we’re able to help 🙂

If you need anything else please let us know.

[Author]

Posts