Docs

[Andreas Bjerve]

Hi, I’m trying to create a fixed header that resizes the size of the logo (Andreas Bjerve) and the height of the navbar when the visitor scrolls down (like on this site: http://asbjornsenakupunktur.no/vidar-asbjornsen/)

Can you help me with this?

Thanks!

(wordpress login will follow)

[Andreas Bjerve]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global 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: all 0.2s linear;
    transition: all 0.2s linear;
}
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
    font-size: 15px;
}

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

Please add following code in Customize -> Custom -> Global javascript :

jQuery(function($) {

$(window).scroll(function(){

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

});

});

Hope that helps.

[Andreas Bjerve]

Really nice, thanks a bunch! How can I vertically align my navbar links? The alignment options in the Header menu does´nt seem to work for me..

Thanks!

[Christopher]

Hi there,

Navbar items align perfectly, please see the attachment.
Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[Andreas Bjerve]

Ah yes, they do, thank you for your time!

[Thai]

If you need anything else please let us know.

[Andreas Bjerve]

Hi there! This was really helpful, but now I´ve changed my logo and the re-size effect isn´t the same anymore. Could you please look into this? I´d like the logo- and NAV bar shrinkage to look like this: http://asbjornsenakupunktur.no, but ideally with a much slower animation/resize rate.

thanks! (login info on the top of this thread)

[Jade]

Hi Andreas,

I tried to check on this thread but I can’t seem to find what your actual site URL is.

Would you mind providing the site URL that you are working on so we can check?

Thank you.

[Jade]

Hi Andreas,

I tried to check on this thread but I can’t seem to find what your actual site URL is.

Would you mind providing the site URL that you are working on so we can check?

Thank you.

[Andreas Bjerve]

This reply has been marked as private.

[Christopher]

Hi there,

Please update following blocks of code :

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand{
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.x-navbar.x-navbar-fixed-top .x-brand {
    font-size: 15px;
}

To :

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-brand img {
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.x-navbar.x-navbar-fixed-top .x-brand img {
    font-size: 15px;
    width: 150px;
}

Hope it helps.

[Andreas Bjerve]

Hi, this work nicely, except that I also want the NAV bar height to descale proportionally, so as to match the new icon alignment. Could you achieve this?

[Paul R]

Hi,

I am not sure what you mean by descale and I don’t see an icon.

This is how it looks on my end.

See Video – http://screencast.com/t/emOPSixn

[Andreas Bjerve]

Hi, sorry, I meant “logo”.

Yes, in your screencast the navbar shrinks exactly as I want it. But on my end it doesn´t. Strange… any ideas why this might be?

[Author]

Posts