Support/Polestar Theme/Header transparency

[Resolved] Header transparency

  • Author
    Posts
  • October 16, 2022 at 2:59 pm #17060

    Neil
    Participant

    Hi,

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

    Thanks,

    Neil

    October 16, 2022 at 3:05 pm #17061

    Andrew Misplon
    Keymaster

    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%);
}
    October 16, 2022 at 3:22 pm #17062

    Neil
    Participant

    Thanks, that’s great.

    October 16, 2022 at 3:42 pm #17063

    Andrew Misplon
    Keymaster

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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Header transparency’ is closed to new replies.

Scroll to top