Transparency and sticky header

  • Resolved braddobson1

    (@braddobson1)


    3 years, 5 months ago

    Hi,

    I’m struggling a little with customisation. I’d like the header to be fully transparent when at the top of the page, then on scroll, I’d like the header to be black but partially transparent.

    Can you assist? Is this doable?

    Thanks
    Brad

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Twentig

    (@twentig)

    Hi Brad,

    You can try adding the following CSS in the Customizer > Additional CSS panel (change the 0.75 opacity value as you like):

    .tw-header-bg .site-header{
	background-color: rgba(0, 0, 0, 0.75);
}

    Hope that helps,
    Tom

    Thread Starter braddobson1

    (@braddobson1)

    Thanks Tom, that’s great.

    However, I’d like the header to be 100% transparent when at the top of the page, then when start scrolling (e.g the sticky header comes in to play) to have the partial transparency.

    Plugin Author Twentig

    (@twentig)

    Twentig provides a custom page template to set the header transparent. When the user starts scrolling, the header becomes semi-opaque (using the CSS code above).

    To change the template of a page:

    1. Open the page you want to edit.
    2. In the Settings sidebar, open the Page tab.
    3. In the Template panel, select the “Twentig – Transparent header” template.
    4. Update the page to apply the change.

    I hope the above is useful to you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Transparency and sticky header’ is closed to new replies.