[Stacey MParticipant]

I was wanting to see if anybody could help me with our developmental church site we are working on. We found a navbar from another site and would like to copy the look/animation that it does while you scroll down. It starts out transparent and then shrinks in size and then becomes another color (light green).

I have tried all the CSS combos that I found on the forum; but have just gave up on trying to make it happen. The navbar that we like is located at https://jamesriver.org/

We are currently set to Integrity with fixed top navbar

Thanks for any help in advance!

[ZeshanMember]

Hi Stacey,

Thanks for writing in!

To achieve that, 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-fixed-top');
    } else {
      $navbar.removeClass('mi-fixed-top');
    }
  }

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

});

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

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

Thank you!

[Stacey MParticipant]

That is close enough to what I was wanting! I can tweak it from here.

Thank you guys for all the help!

-Stacey

[RupokMember]

You are welcome Stacey!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts