Reduce the logo&header when user scroll down

[antoine_generau]

Hello,

I am currently working on this website and I’d like to achieve the following thing with the fixed header:

• Reduce the size of the logo when the user scroll down (approx. 60%)
• Reduce the height of the header

How can I achieve this?

Thanks,
Antoine

[ruenel]

Hello There,

Thanks for posting in! To achieve what you have in mind, please do the following:
1.) Edit the page in Cornerstone and in the custom js section, Custom JS and insert the following custom js code

jQuery(function($) {
  $(window).scroll(function(){
        if($(window).scrollTop() > 300 ){
          $('.x-navbar-wrap').addClass('navbar-resized');
        } else {
          $('.x-navbar-wrap').removeClass('navbar-resized');
        }
    });
});

2.) And insert the following custom css in the settings tab, Settings > Custom CSS

body.x-navbar-fixed-top-active .x-navbar-wrap.navbar-resized {
  height: 75px;
}

.x-navbar-wrap.navbar-resized .x-navbar-inner {
    min-height: 75px;
}

.x-navbar-wrap.navbar-resized .x-brand img {
    width: auto;
    max-height: 65px;
}

.x-navbar-wrap.navbar-resized .x-navbar .desktop .x-nav > li > a {
    height: 75px;
    padding-top: 32px;
}

Screenshot

Please let us know if this works out for you.

[antoine_generau]

Thank you! It’s working, but I have a few questions:

1. Is it possible to add the JS on the entire site, so that I don’t have to add to on every single page? I managed to do it for the CSS, but not for the JS.

2. How can I add a smooth effect so that the size of the logo and the height of the navbar reduce continuingly? It currently changes at once and this is not so nice.

Thanks,
Antoine

[rad]

Hi @Lecoqdigital,

1. Yes, it’s more recommended. You can add it into CSS and JS section of Theme Options.

2. Tried with CSS transition but it’s not working, since you’re adding and removing the class that instantly remove the styling instead of gradually changing it. I recommend applying the transition through custom javascript which we can’t further provide. You may enhance it as well, the provided snippet should serve as a guide and sample.

Thanks!

[antoine_generau]

Ok thank you. I might then use a slacked logo instead, which will then solve the problem

[rad]

You’re most welcome! Cheers!