Docs

[captainfowler]

Hi

Really appreciate the theme and how responsive you are in support!

I don’t know if I am using the right words, but I wonder if there is a way to have the logo reduce in size when scrolling down the page, to save real estate.

The effect I am looking for is what the logo does on this website:

http://withlovefromkat.com

All my details are:

URL: http://firstandtrend.com

Wordpress: 4.6.1

X-version: 4.6.4

Cornerstone: 1.3.3

Thanks

[Paul R]

Hi,

To achieve that, you can add this under Custom > Edit Global Javascript in the Customizer.

jQuery(function($) {
   $(window).scroll(function(){
        var y = $(window).scrollTop();
        if (y <= 0){
           $('.x-navbar').removeClass('x-navbar-fixed-top');
        }
    });
});

Then add this in Custom > Edit Global CSS

.x-navbar.x-navbar-fixed-top img {
   width:200px;
}

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

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

body.x-navbar-fixed-top-active .x-navbar-wrap {
   height: auto;
   transition: all 0.5s ease-in-out;
}

Hope that helps.

[captainfowler]

That helps a lot. One extra thing…

Is there a way to have an effect or transition, so that it does not just suddenly change but gradually gets smaller. like a reverse genie effect?

Thanks for all of your help!!!!!!!!!!

[Jade]

Hi there,

Please add this code in the customizer:

a.x-brand.img img {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    width: 400px;
}

.x-navbar.x-navbar-fixed-top img {
    width: 200px !important;
}

Hope this helps.

[captainfowler]

Thank you so much for all of your help, that looks and operates fantastically. I know that is probably more than what is required in “support” so thank you again for the effort.

It makes me really happy that I chose the X-Theme!!!

[Paul R]

You’re most welcome! 🙂

[Author]

Posts