Naked Header showing white background

[marekpolak]

Hi Support,

I have read numerous related support forums related to similar situation and tried all suggested custom codes, etc to no avail.

What I’m trying to achieve is either:
1. Standard Header, but make the background colour transparent, so only logo shows up and there is no header border or shadow.
or
2. Use Naked Header, which seem to work but only to some extend.

Issue:
When I use Standard Header, how can I make background transparent, but not the whole header. I have found some custom CSS which makes whole header transparent including the logo. This is not what I’d like to achieve.
Secondly, when I use Naked Header page looks as expected, but only when the viewpoint is at the very top of the page. The moment I start scrolling the page down header shows a white background and border/shadow. How can it be fixed?

I want to mention that I’ve tried various theme settings provided like Sticky Header (ON/OFF), different header styles (Standard, Naked Light and Dark), Header Shadow (ON/OFF), etc. None of these gave me the results I’d like to achieve.
I have even tried to update to 3.0.3 but this update seem to break so many things (as reported in other threads) that I reverted installation back to 2.8.2 from the backup.

I would be very grateful, if you could suggest a permanent fix/solution to this

Kindest regards,
Marek

[David Martin – Support]

Hi Marek,

From what you say, you want a transparent header without a border?

If so, please use this:

.is-sticky #header.sticky-header.sticky-header-resized {
    background-color: transparent!important;
    border-bottom: none!important;
}

– David.

[marekpolak]

Hi David,

Thanks for your suggestion. I have tried this css before. The outcome is:
Background is indeed transparent, but header still contains a shadow even though Header Shadow setting is OFF. As you scroll down the page over different sections and images it is still visible there is a header shadow. Also, the original issue is not resolved where header “blinks” white background as you scroll the page. What I mean is that on load the header is transparent, but when I scroll the page white background appears and header becomes transparent again, when I stop scrolling.
Can it be fixed somehow?

Many thanks
Marek

[David Martin – Support]

Hi,

Yes I see the shadow, please use my updated CSS to remove it:

.is-sticky #header.sticky-header.sticky-header-resized {
    background-color: transparent!important;
    border-bottom: none!important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
}

– Can you add a WP login for me to take a further look also?

Thanks,
David.

[marekpolak]

This reply has been marked as private.

[David Martin – Support]

Hey,

Sure, please also add:

.naked-header .is-sticky #header.sticky-header {
    background-color: transparent!important;
}

– David.

[marekpolak]

Superb!

David, thank you very much for your patience and support.
Please, feel free to close the ticket.

Best regards,

Marek

[Mohammad – SUPPORT]

Hi,
Great thanks to David.
Mohammad