Docs

[suzannereid]

Hi,
on my site: http://rachelehphotography.armorlight.biz, I’m trying to get the header/navbar (on the HOME Page) to be transparent initially and then upon scroll have the logo shrink to about 200px and a semi transparent white background on the logobar and the navbar with smooth transition. I’ve looked all around on this form and tried combining all types of CSS and Javascript but i’ve ended up making more of a mess than not. 😛

So, is it possible for some guidance? 🙂 thanks!

[suzannereid]

http://themenectar.com/demo/salient-frostwave/ (here’s an example, though it’s not stacked)

[Rupok]

Hi there,

As you are using stacked layout, it would be a bit tricky. Let’s me try to help you to achieve this.

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

jQuery( function($) {    
      $(window).on("scroll", function () {    
    if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
      $('.x-logobar').addClass('x-logobar-fixed-top');
                }else {
                        $('.x-logobar').removeClass('x-logobar-fixed-top');
                }   
  }).scroll();
});

Then add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-fixed-top {
  background-color: #fff !important;
  padding-bottom: 10px;
  top: 0;
}

.x-logobar.x-logobar-fixed-top {
  background-color: #fff !important;
  z-index: 9999;
}

.x-brand img {
  transition: all 0.2s ease 0s;
}

.x-logobar-fixed-top .x-brand.img > img {
  width: 200px;
}

Hope this helps.

[suzannereid]

Thanks! I adjusted some things and it worked great!

[Joao]

Glad to hear it,

Joao

[Author]

Posts