Transparent header and colored when sticked X PRO

[Lyser]

Hello,
I would like to know how to to add a background color to a header when it’s originaly transparent.
The background color would appear on the sticky header when scroll down.

here

the class for the background color already exist it’s called headcol

[thai]

Hi There,

Please try adding this custom CSS:

.hm1.x-bar {
    transition: all 0.5s ease;
}
.hm1.x-bar.x-bar-top.x-bar-h.x-bar-absolute.x-bar-outer-spacers.x-bar-fixed {
    background-color: #292727;
}

Let us know how it goes!

[Lyser]

Yes it works thx !

But the color i use is a gradient :
background: #c32755; /* Old browsers */ background: -moz-linear-gradient(left, #c32755 0%, #414c90 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #c32755 0%,#414c90 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #c32755 0%,#414c90 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c32755', endColorstr='#414c90',GradientType=1 ); /* IE6-9 */

And it seems to make the transition: all 0.5s ease; not working anymore

Also do you know if it’s possible to shorten the height of the header when scrolled down ?

[eperroud]

exemple:

-webkit-transition: background 1s ease-out; 
-moz-transition: background 1s ease-out; 
-o-transition: background 1s ease-out; 
transition: background 1s ease-out;

on object :hover, just set a different width and test.

[nabeel]

Hi @eperroud,

Thanks for the help

@Lyser,

Seems like gradient backgrounds are not supported in transition property, use background-color instead or follow the suggestions here https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds. To reduce the height, you can replace your code with this:

.hm1.x-bar.x-bar-top.x-bar-h.x-bar-absolute.x-bar-outer-spacers.x-bar-fixed {
    background: #c32755;
    background: -moz-linear-gradient(left, #c32755 0%, #414c90 100%);
    background: -webkit-linear-gradient(left, #c32755 0%,#414c90 100%);
    background: linear-gradient(to right, #c32755 0%,#414c90 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c32755', endColorstr='#414c90',GradientType=1 );
    height: 75px !important;
}

Hope this helps!

[Lyser]

Thank you !

[paul.r]

You’re welcome!