[Resolved] Custom sticky logo for different pages

[Michael]

Hi there

I already have different header logos for different pages in place. Did that using a special header element and assigned it to the specific pages only.

In addition, I would like to use the specific logo also for the sticky header. Currently, the sticky header contains my default logo but this is not correct for some pages. The goal is to always have the same header logo when at top of the page and if scrolled (sticky).

Tried this code:

.page-id-917 .sticky-enabled .main-navigation.is_stuck > .inside-navigation grid-container > .navigation-branding img {
  background-image: url("https://...");
}

What is the best way to achieve this?
A hook does not help here, correct? At least I could not find an option for sticky elements there.

Thanks a lot
Michael

[Ying]

Hi Michael,

Can you try this CSS:

.main-navigation.navigation-stick .page-hero-logo {
    display: block;
}
.main-navigation.navigation-stick .site-logo:not(.page-hero-logo) {
    display: none;
}

[Michael]

Thank you Ying, works good.

I have extended your code so on the home page the sticky logo appears as well:

.home .main-navigation.navigation-stick .site-logo:not(.page-hero-logo) {
    display: block;
}

[Ying]

Awesome!

Glad to help 🙂

[Author]

Posts