i had some success in changing the hight of the nabber by changing the css for x-navbar x-navbar-fixed-top but it does not look that clean. any ideas?

thanks
visualteachingtechnologies.com/

Thanks for writing in.

The code will not work, the one that giving height from your navbar are your menu items.

Add this css at your customizer’s custom css,

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 2s, padding-top 2s;
    transition: height 2s, padding-top 2s;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 2s;
    transition: min-height 2s;
}
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 100px;
}

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

Then add this code at your customizer’s custom javascript.

jQuery(function($) {

$(window).scroll(function(){

if($(this).scrollTop()<=0) {
$('.x-navbar').removeClass('x-navbar-fixed-top x-container-fluid max width');
}

});

});

Hope this helps.

Is there a way to make a smoother transition from the top menu to the scroll menu?
also i would like for the scroll menu to have a different logo image of just the globe.
here is the path to the image i want to use

http://visualteachingtechnologies.com/wp-content/uploads/2015/01/VTT-Logo_without-text.png

thanks
-Angus

Great to hear that!

But since you already applied those code, I can’t no longer add or modified that existing code. I’d like to quick test some easing animation.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

Please try adding this CSS :

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar-inner {
transition: min-height 0.5s ease !important;
-webkit-transition: min-height 0.5s ease !important;
}

And change this code :

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 2s, padding-top 2s;
    transition: height 2s, padding-top 2s;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 2s;
    transition: min-height 2s;
}

To this :

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height 0.5s ease, padding-top 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

Hope it helps.

“I would like for the scroll menu to have a different logo image of just the globe.
here is the path to the image i want to use

http://visualteachingtechnologies.com/wp-content/uploads/2015/01/VTT-Logo_without-text.png”

is there a way i can get the image to change at the same speed as the navbar? as of now it just seems to jump between big and small and there is no transition.

I am hoping for something like this

How to change height and opacity non-fixed header

both the actual navbar on the page as well as the solution.

Thank you very much!
Angus

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

We included the code as suggested and everything works fine so far. Except that we’re experiencing still a “jumping” logo. It would be great if you guys could help us to make it a more smooth transition, like in the same speed as the navbar (the logo should resize to the smaller version when scrolling down similarly).

See: http://www.quaest.net/cms/

Thanks a lot in advance!

Best,
Darius

unfortunately I can’t read your reply, since it was marked as private.

Best
Darius