Showcase Pro Header / Logo Issue

[PainterMommy]

I would like for the site to have 2 different logo designs. One for when someone firsts clicks on the site and then another one for when you scroll down. I know that they can be adjusted by changing out the logo_dark.png and logo_light.png, but when I do that, nothing changes, even after I clear the browser cache. I am wondering if maybe I accidentally deleted some code in the stylesheet that is causing a problem? The site URL is http://www.yulitprice.com/

I like the light logo that pops up when you first go to the site because the tagline is white and can be read on the darker background. But for the scroll, it is not visible on the white navigation bar background so I created one with a black tagline. But it is not showing up for some reason.

I appreciate any help that you might have for me. Thanks ahead of time!

http://www.yulitprice.com/

[Erika]

After inspecting the original theme, this piece of code is where you place the "first" logo, the one someone sees when they first visit the site:

body.with-page-header.header-image:not(.header-scroll) .site-title a {
background-image: url(images/logo_light.png) !important;
}

This is the piece that controls the second or "scrolling" logo:

.site-title a {
background: url(https://showcase.designbybloom.co/wp-content/uploads/2017/05/Logo_Dark.png) no-repeat !important;
}

Just replace the URL links with your own. Let me know if this works.

[PainterMommy]

I went ahead and did what you said but I am still not seeing the logo change upon scrolling. Hmmmm...

[Victor Font]

Did you upload a logo through the Appearance/Customize page? If so, remove it. Images added through Appearance / Customize header image are added through inline CSS that overrides anything in the style sheet. Just add the image URLs directly to the style sheet and forget the customizer. It should work fine.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[PainterMommy]

When I remove the logo from the customizer, this is what shows up... no logos at all...

[PainterMommy]

Here is the code in the stylesheet that I added the logo urls to (both dark and light)

.header-image .site-title > a {
	background-position: center center !important;
	background-size: contain !important;
	float: left;
	height: 5rem;
	width: 14rem;
	background-image: url(http://www.yulitprice.com/wp-content/uploads/2017/10/yulit_price_logo_dark.png);
}

@media only screen and (min-width: 800px) {
	body.with-page-header.header-image:not(.header-scroll) .site-title a {
		background-image: url(http://www.yulitprice.com/wp-content/uploads/2017/10/yulit_price_logo_light.png) !important;
	}
}

But it is still not working. Sigh...

[lbweinstein]

Hi There-
I was searching this forum because I am having a similar but different issue with the Showcase Pro Logo. Seeing your post, and I hope you have resolved this issue by now, but if not, I noticed that you are missing
!important;
from your CSS.

Copy the code below and paste your image URL between the parentheses (images/logo_light.png)
___________________________________________________________________________________

@media only screen and (min-width: 800px) {
body.with-page-header.header-image:not(.header-scroll) .site-title a {
background-image: url(images/logo_light.png) !important;
}
}

[deb]

Hi all. I cannot find this code anywhere in my CSS when i go into Appearance>Editor. This is driving me nuts. I have the dark logo working... but when i try and find the code you show above (which is also in the Showcase Pro instructions) it is no where to be found. WT?

[Susan]

Have you submitted a support ticket to Bloom Design? They are the theme developers, and will be able to help you.

[Author]

Posts