Changing colour of the header

[nitin942]

Hi,

I want the header to be transparent when its stationary and to have white colour when scrolled down.

Kindly tell how it can be done.

Website: http://www.shapecrunch.com

[Veena]

Pls use the below custom CSS in themeoptions > custom CSS tab –

#header-spacer {
    height: auto !important;
}
#header {
    background: transparent !important;
}
#header.sticky {
    background: #fff !important;
}

[nitin942]

Hi,

I made the above changes and it’s working fine apart from a little bug.

On scrolling down, the colour of the header remains transparent and becomes white after sometime.

Ideally, on scrolling down, the colour should change to white instantaneously.

Looking forward for your response.

[Veena]

Sorry for the delay in reply.

Can you pls modify the custom CSS to

#header-spacer {
    display: none !important;
}
#header {
    background: transparent !important;
}
#header.sticky {
    background: #fff !important;
}

And see if that makes any difference.

[Author]

Posts