Can logo minimize on scroll?

Support
#1

Hello,

Is it possible to have the logo minimize as you scroll down the page, similar to this?

Thanks for any help,
Justin

#2

Hey Justin,

Thanks for writing in!

Yes, that is possible. I am assuming that your logo and navigation were displayed as Inline. To accomplish that, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .x-brand img {
    transition: height 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .x-brand img {
    max-height: 70px;
    width: auto !important;
}

Feel free to adjust the maximum height of the logo as you scroll the page.

#3

Thank you, but that didn’t seem to work.
I have the logo set to stacked, so it’s center aligned at the top.

#4

Hi Justin,

Unfortunately, it will only work on the inline navbar. The stacked navigation where the logo is doesn’t have the selector .x-navbar-fixed-top or any selector to identify if it’s scrolling.

Another option is creating your header with Pro header, it has many options you could use including the shrinking ratio of the entire header and not just the logo.

Thanks!

#5

Ok. Can you possibly show me how to do both of these options?

#6

Hello Justin,

You can make use of this custom JS code. Please add this JS code in the X > Theme Options > JS

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

    var $window = $(window);

    function resize_image(){
        var bodyOffsetTop = $window.scrollTop();
        if ( bodyOffsetTop > 10) {
            $('.x-logobar img').css({'max-width': '150px'});
        } else {
            $('.x-logobar img').css({'max-width': '100%'});
        }
    }

    $(window).on('scroll', function () {
        resize_image(); 
    });

  });
}(jQuery));

We would love to know if this has worked for you. Thank you.

#7

Thank you.

#8

You’re welcome!
We’re glad we were able to help you out.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.