[SRBrentonParticipant]

Hi Everyone,

I was looking to have my navbar mimic what you see on http://themepunch.com/.

Notice the navigation elements are part of the webpage at first rather than contained within a bar, as you scroll down to a certain point a fixed navbar appears. Notice the effects as the bar appears you see it slide down from top to bottom. As you scroll back up the bar disappear again.

Is this something that may easily be done to have the fixed navbar appear only after you scroll down just slightly?

Thanks,

[ZeshanMember]

Hi there @srbrenton,

Thanks for writing in!

It’s not possible out of the box, but it can be achieved with custom development. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

So to achieve a similar effect as per your example, first add following JS code under Custom > JavaScript in the Customizer:

// 
// Static Navbar On Top - JS
// 

jQuery(document).ready(function($) {

  var $win = $(window),
      $navbar = $('.x-navbar');
  function staticNavbarOnTop() {
    if ( $win.scrollTop() < 300 ) {
      $navbar.addClass('mi-static-top');
    } else {
      $navbar.removeClass('mi-static-top');
    }
  }

  staticNavbarOnTop();
  $win.scroll( staticNavbarOnTop );

});

Then add following CSS code under Custom > CSS in the Customizer:

/* Static Navbar On Top - CSS */
.x-navbar.mi-static-top {
  position: absolute;
  width: 100%;
  background-color: transparent;
  box-shadow: none;
  border: none;
}

Thank you!

[Author]

Posts