Change logo when Sticky navigation is ON

[alexvs1980]

Hi Ed,

I asked you in other thread to achieve what you do here: http://dante.swiftideas.net/home/home-eight-naked/ but we were discussing other issues and maybe forgot to answer that.

I just to use the same logo but with inverted colors. You told me to hide the logo and display an image background to achieve that.

Could you explain me how to do it ?

My temp site is clouds.strateo.net

Thank you !

[Swift Ideas – Ed]

Best to keep it is a separate topic, easier to track! Ok, so modifying what we did with our naked header example, the following code should work for what you want to do:

.sticky-header-resized #logo img {
display: none!important;
}
.sticky-header-resized #logo {
background: transparent url('http://dante.swiftideas.net/wp-content/uploads/2013/10/[email protected]') no-repeat center left;
background-size: 92px 21px;
width: 92px;
}

You’ll need to set your logo image URL, and background-size and width, based on the logo you want to use.

Hope that helps. Give it a go and if it needs tweaking I’ll take a look.

– Ed

[alexvs1980]

Hi Ed,

That helped me a lot!

Is there a way to trigger the change the logo when the sticky navigation changes the color instead of when it resizes ?

Look to my site clouds.strateo.net and you’ll see there is a moment that the navigations changes the color but the logo stills the same and when the sticky starts resizing, the logo changes.

Once again, thank you for your great support.

Regards,
Alex.

[Swift Ideas – Ed]

Ahh ok sure, use this code instead:

.is-sticky .sticky-header #logo img {
display: none!important;
}
.is-sticky .sticky-header #logo {
background: transparent url('http://dante.swiftideas.net/wp-content/uploads/2013/10/[email protected]') no-repeat center left;
background-size: 92px 21px;
width: 92px;
}

– Ed

[alexvs1980]

Hi Ed,

Thank you, just what I wanted !

Regards,
Alex.

[Swift Ideas – Ed]

Great 🙂

– Ed