Transparent header transition

[lorraine]

Hi,

Is there any way of making the transition of the header/nav from transparent smoother than it is?

Lorraine

[Rui Guerreiro – SUPPORT]

Hi,

Not sure about this one. Will forward to the development to see if it’s possible.
Thanks

-Rui

[Swift Ideas – Ed]

Hi Lorraine,

Try adding this custom css:

.sticky-header {
    transition: height 0.5s ease-in-out, transform 0.5s ease-in-out, background-color 0.5s ease-in-out!important;
    -moz-transition: height 0.5s ease-in-out, transform 0.5s ease-in-out, background-color 0.5s ease-in-out!important;
    -webkit-transition: height 0.5s ease-in-out, transform 0.5s ease-in-out, background-color 0.5s ease-in-out!important;
    -o-transition: height 0.5s ease-in-out, transform 0.5s ease-in-out, background-color 0.5s ease-in-out!important;
}

Let us know if that sorts it for you.

– Ed

[lorraine]

Works a charm 🙂

I’d definitely recommend adding this to your next update.

While I’m here – why is there already code in the custom CSS box?? Has that come from using the demo importer and installing a theme?

[Swift Ideas – Ed]

It’s already added 🙂

It could have been from the import – what code is it?

– Ed

[lorraine]

Cool 🙂

This is the first chunk:

/* Extra space around header on home */
.home .header-wrap {
    padding-top: 30px;
}
.home .full-center #header.fw-header > .container {
    padding: 0 50px;
}

/* Reduce intro blank spacer when viewport height reduced */
@media screen and (max-height: 700px) {
    #intro .blank_spacer {
        height: 250px!important;
    }
}

/* Hero continue hover */
#hero-continue > div:hover {
    background: #fff;
}
#hero-continue > div:hover > i {
    color: #1a1a1a!important;
}

/* Video icon on demo video */
#video .fw-video-link-icon {
    background: #fff;
    color: #222;
}
#video .fw-video-link-icon:hover {
    background: #000;
    color: #fff;
}

/* Center the portfolio filter */

[Swift Ideas – Ed]

Ahh – that’s the features demo custom css, we kept that with the import so that it would be an exact match. You can remove it if you’d prefer.

– Ed

[lorraine]

Ahhhh…that 30px padding drove me potty – couldn’t for the life of me work out where it had come from!

Thank you 🙂

[Mohammad – SUPPORT]

Hi,
Have your issue been resolved?
Thanks
Mohammad

[lorraine]

Yes, all sorted! 🙂

[Mohammad – SUPPORT]

Hi,
I am glad that your issue resolved.
Thanks
Mohammad