[awecesarParticipant]

Hey,
I would like to have my top bar with my logo and navigation change a bit if someone scrolls down – the effect I mean is visible here: http://callmenick.com/tutorial-demos/resize-header-on-scroll/
Is there a way to accomplish this in X?
Thanks so much – you guys are making this theme twice as good!

[ZeshanMember]

Hi there,

Thanks for writing in! This is technically possible with custom development. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Try inserting this under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');

    if (scrollPos > 150) {
      navbar.addClass('navScroll');
    } else {
      navbar.removeClass('navScroll');
    }
  });
});

And this under Custom > CSS in the Customizer:

@media (min-width: 980px) {
    .x-navbar .x-navbar-inner,
    .x-navbar .x-brand img,
    .x-navbar .desktop .x-nav > li > a {
        transition: 0.25s all linear;
    }
    .x-navbar.navScroll .x-navbar-inner {
        min-height: 80px;
        transition: 0.25s all linear;
    }
    .x-navbar.navScroll .x-brand img {
        max-width: 150px;
    }

    .x-navbar.navScroll .desktop .x-nav > li > a {
        height: 70px;
        padding-top: 40px;
    }
}

Hope this helps. 🙂

Thank you.

[awecesarParticipant]

wow this works really well! thank you so much!
just one more question to this – could you provide me with a code that allows me to change the logo image when scrolling down like here in my photoshop image?
http://prntscr.com/67qfar

THANK YOU!

[SenthilMember]

Hi There,

We’re happy that it solved your problem.

Pleas replace the previous JavaScript code with the below one to use an alternate image while it scrolls down.

You can can replace this line in the code with your own image URL
var imageUrl=’http://placehold.it/50×50‘;

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');
	var imageUrl='http://placehold.it/50x50';

    if (scrollPos > 150) {
    	navbar.addClass('navScroll');
		jQuery('.x-navbar.navScroll .x-brand img').css('opacity',0);
		jQuery('.x-navbar.navScroll .x-brand').css('background','url('+imageUrl+') no-repeat left center');
    } else {
		    			
		jQuery('.x-navbar.navScroll .x-brand').css('background','transparent');
		jQuery('.x-navbar.navScroll .x-brand img').css('opacity',1);		
		navbar.removeClass('navScroll');
		
    }
  });
});

Hope it helps, thanks!

[scottkwilsonParticipant]

This has worked beautifully for me! Just what I needed! I do have a request for an additional tweak though. On my site (scottkeithwilson.com), the header transitions to soon on the homepage. I’m currently using scrollPos > 33 in the JS, which is perfect for all other pages, but as you can see on the homepage the transition is too soon. I’d like it to transition when the header touches the top of the browser. Is this possible?

Also, on a slightly different note, it would really be ideal to replicate this effect (http://www.rubbish-taxi.com/) where the header disappears from the page, then drops down in a smaller verison. If this is possible (i.e. within scope of X support), that would really make my day.

Thanks!

[ChristianModerator]

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts