Sticky Navi is not resizing propperly

Support
#1

I found the old code below,
the logo is switching and the navigation bar gets a tiny bit smaller,

My goal was to minimize the navigation to 40-50px max hight on scroll down,
but can´t figure out how to do it propperly

jQuery(document).ready(function($) {
$(window).scroll(function() {
var scrollPos = $(window).scrollTop(),
navbar = $(’.x-navbar’);
var imageUrl=’/ww.xyz.de/wp-content/uploads/2018/02/xyz.png’;

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');
	
}

});
});

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

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

}

#2

Hi There,

Thanks for writing in! Upon checking, I see that it’s already set to 40px (check secure note).

I see the following code applied.

.x-navbar.navScroll .x-navbar-inner {
    min-height: 40px;
    transition: 0.05s all linear;
}

Thanks!

#3

I would like to get the hight even more reduzed.
I can move the Links up, or shorten the logo,
but the total hight seems unable to get smaller

ijust changed
.x-navbar.navScroll .x-navbar-inner {
min-height: 20px;

    transition: 0.05s all linear;
}
.x-navbar.navScroll .x-brand img {
    max-width: 120px;
}

.x-navbar.navScroll .desktop .x-nav > li > a {
    height: 20px;

    padding-top: 20px;
}

and it still is the same hight (in total)

#4

I changed the logo size, but it seems to not matter

#5

Hi There,

I would suggest you upgrading your theme to PRO which has the header builder and will allow you to build this design code free.

https://theme.co/apex/licenses

If you prefer to stick with X please provide your login credentials so we can take a closer look.

Thanks

#6

I put a test navi online - see secure note.
The scaling in hight works very nice,
but the initial idea was to use 2 different logos as on startpage.
How can I do this with the header ?

To be more precice, we want to show just the text below the logo on scroll down,
so it might be a logo excanche
ore maybe even better if the logo gets pushed out of the screen and just the lower text remains.

Kind regards

#7

Hey @Schmidtarchitekten,

When the bar gets fixed, the class of x-bar-fixed is actually being added to it. You can utilize that class to hide elements when the bar is fixed. Please see this quick screencast to see the setup.

Here’s the CSS used in that setup.

.hide-default.x-image {
  display:none;
}

.x-bar-fixed .hide-default.x-image {
  display:inline-block;
}

.x-bar-fixed .hide-fixed.x-image {
  display:none;
}

Pushing the logo out of view would require more CSS and that would be getting outside the scope of our support.

Thanks.

#8

Thank you very much for the help and tutorial.
Impressive support!

Kind regards

#9

You’re most welcome!

#10

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