Header transparency

Neil Oct 16, 2022 · 2:59 pm #17060

Hi,

Is it possible to add a level of transparency to the header in Polestar?

Thanks,

Neil

Andrew Misplon Puro Oct 16, 2022 · 3:05 pm #17061

Hi Neil

At the top of the page, you can overlap by using the Header Overlap Page Setting:

Page Settings

You can adjust the transparency on scroll by adding the following to Custom CSS:

.site-header.stuck {
    background: rgba(255,255,255,0.5);
}

255, 255, 255 can be changed to your color of choice. 0.5 can be changed to your chosen opacity. If you want to also adjust the header bottom border on scroll you can rather use:

.site-header.stuck {
   background: rgba(255,255,255,0.5);
   box-shadow: 0 1px 1px rgb(0 0 0 / 8%);
}

Neil Oct 16, 2022 · 3:22 pm #17062

Thanks, that’s great.

Andrew Misplon Puro Oct 16, 2022 · 3:42 pm #17063

Super; I’m glad to hear you’re making progress.