Header background

[sykesia]

Hi,
The site is: http://www.timmymallett.co.uk.

I’ve got transparent shrinking headers on all pages apart from the home page.

On non home pages, when you scroll down, the header goes semi transparent.

I want to make it so that when I go onto each page, other than home, the header is completely transparent to begin with.

How do I achieve this please?

Many thanks,
Iain

[Zex]

Hello Iain!

Here’s the code you need:(insert it in Customize->General->Additional CSS)

.header_transparent header.header_v2 .sticky-header:not(.sticky-header-shrink):not(.page-id-5855){
    background-color:transparent!important;
    position: fixed!important;
    

You will also need to move the page content down,
so, you need to additionally add next code:

#content,#secondary{
       padding-top: 216px!important;
}

If you will want to remove the line below the header, insert next code:

.header_transparent header.header_v2 .sticky-header:not(.sticky-header-shrink)
{border-bottom: none;
}

Best Regards

[sykesia]

This reply has been marked as private.

[sykesia]

This reply has been marked as private.

[Zex]

Hello, there!

I think the above codes are ok.

Actually, you probably inserted only first code I gave you so that the head became transparent, but because you don’t have a content below the header it seems to look as white.
for that reason, you need to add a second code, so your content goes up below your header.

Anyway…

Please, copy/paste next code FOR A TRANSPARENT HEADER, in Customizing->General->Additional CSS:

.header_transparent header.header_v2 .sticky-header:not(.sticky-header-shrink):not(.page-id-5855){
    background-color:transparent!important;
    position: fixed!important;}

#content,#secondary{
       padding-top: 216px!important;
}

OR next code instead, FOR THE SEMI-TRANSPARENT HEADER:

.header_transparent header.header_v2 .sticky-header:not(.sticky-header-shrink):not(.page-id-5855){
    background-color: rgba(255, 255, 255, 0.8)!important;
    position: fixed!important;}
#content,#secondary{
       padding-top: 216px!important;
}

If this doesn’t work, please give me your login credentials in private replay.

Best Regards

[sykesia]

This reply has been marked as private.

[Zex]

This reply has been marked as private.

[sykesia]

This reply has been marked as private.

[Zex]

This reply has been marked as private.

[Author]

Posts