Shrink logo in nav bar when scrolling down

Support
#1

Hi there.

I have searched for this possible solution, however what I found and implemented does not seem to work.

I was hoping to be able to have the logo reduce to about half size when scrolling down the page. And also have a small amount of space between the nav links and the bottom of the header. Is it also possible to include a transparent header until the user scrolls, which then becomes opaque white upon scrolling?

Thank you.

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Hi Joao.

Thanks for getting back to me. Details as follows in secure note.

Thank you.

#4

Hi There,

  • Please add the following CSS under Customizer > Custom > Global CSS:
.x-brand img,
.desktop .x-nav > li > a {
    transition: all ease 0.5s;
}
.x-navbar.scroll-nav .x-brand img {
    width: 130px;
}
.x-navbar.scroll-nav .desktop .x-nav > li > a {
    padding-top: 25px;
}
  • After that also add this code under Customizer > Custom > Global Javascript:
jQuery(function($) {
	$(window).scroll(function(){
        if($(window).scrollTop() > 0){
        	$('.x-navbar').addClass('scroll-nav');
        } else {
        	$('.x-navbar').removeClass('scroll-nav');
        }
    });
});

Let us know how it goes!

#5

I used it on my site and it works great but logo goes up because of padding css I use.

How do I get the logo to line up with the bottom of the menu bar after scroll function?

#6

Hi @jozhica,

Thanks for writing around! I’ve removed your secure note as it is also visible to the original poster / thread owner. Always make sure to create a new thread if you need to share the credentials in someone else’s thread. I checked your setup and you have many navigation items I’d recommend you to reduce the number of menu items by adjusting them in sub menus or you can activate the mobile menu instead in desktop view. It’d be not possible to display logo and menu items in one line due to many menu items.

Hope this helps!