Change size of menu while scrolling

[rystaman]

Hi there

I’ve managed to code my menu to change colour whilst scrolling using this Javascript code

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

    if (scrollPos > 800) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});

And have this CSS Code styling it

.x-navbar {
    transition: 0.2s all linear;
}

.x-navbar.alt-color {
    background-color: grey !important;
}

However i’m unsure of how to change the size of the menu when it hits the scroll point. I’ve tried adding

.x-navbar-alt-color .x-navbar .desktop .x-nav > li > a {
    padding-top: 28px; 
}

However that’s not working. Where am I going wrong?

Website URL is - www.rjdesigns.website

[friech]

Hi There,

Thank you for writing in, please add this to Theme Option > CSS

.x-navbar.alt-color {
	height: 50px;
}
.x-navbar.alt-color .x-brand {
	margin-top: 8px;
}
.x-navbar.alt-color #ubermenu-main-7-primary-2 {
	display: inline !important;
}

Hope it helps,
Cheers!

[rystaman]

Hi there

That’s working great. Where was I going wrong?

[Joao]

Hi There,

We have just completed the code you had already provided.

Hope it helps