Docs

[martytb]

Hi there,

I am working on a website for one of my clients (http://blutarsky.yescando.nl/). They really want the navbar to shrink when you scroll down the page (like on this website: http://www.gidsingezondheid.nl/). I am sure this is possible in Xtheme, but I can’t find it. Could you maybe assist me?

Thanks!

[Joao]

Hi There,

Please add to your Appearence / Customizer / Custom CSS the following code.

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height 0.5s ease, padding-top 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 150px;
margin-top: 0;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

.x-navbar {
border:none;
box-shadow:none;
}

And to your Appearence / Customizer / Custom / JavaScript

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    var boxedClasses = '';
    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 60 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }
    });
  }
});

You can adjust the (px) of the css code according to your wishes for the header size, logo size etc.

Hope that helps,

Joao

[martytb]

Thanks Joao,

After some small tweaks it works perfect! Great support once again! <3

Cheers

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[martytb]

Hi Thai,

My client asked me if the animation could be a little smoother? If you look at the logo on http://www.gidsingezondheid.nl it has a really smooth animation. Our site is a big clunky in comparison. Any way to get that smooth-looking resize? Thanks!!

[Rad]

Hi there,

Please change this existing CSS,

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

to this,

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

That should do it 🙂 Cheers!

[martytb]

Cool thanks, any way to let the logo go smooth too instead of jumping from big to small?

[Rupok]

Hi there,

Thanks for updating. I can see the transition also applied for the logo as well and working fine. If you want more smoother transition then increase the transition period :

#header #main_logo a {
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

Note that currently you are using 0.2s.

Hope this helps.

Cheers!

[Author]

Posts