Site Branding tweak

Hello,

I want to use the main Header Image as way to provide visitors with a prominent brand experience with our identity. Therefore, I would like the smaller Site Brand logo (upper left) to only appear once scrolling begins. This would also fix the fact that I would need it to shift form white to black. I don’y have the Site Branding active yet as it would compete with the main message.

Thanks

Hello there,

Thank you for getting in touch.

Could you please try to add the following CSS code through the Simple Custom CSS plugin?

.header-scrolled .site-branding a{
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url('URL_TO_YOUR_LOGO_IMAGE') center center no-repeat;
  background-size: 100%;
}  

.header-scrolled .site-branding img{
  display: none;
}  

You should need to replace the URL_TO_YOUR_LOGO_IMAGE to your own. You might need to adjust the width and height values as needed.

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Kharis,

Thanks for the code. It did work, however, it is doing the opposite.
I would like the site branding to be absent and only appear once scrolling begins. This code allows site branding to be visible and disappears after scrolling begins.

thanks,

Kharis,

I still have not received a tweak that works to resolve this issue. I have it live now and you can see it at <cratenc.com>.

I would like the site branding logo to not exist at all until the scrolling begins

thanks,

Hello there,

Thank you for reporting.

I thought the code works well. Please see this screencast https://cloudup.com/czUXBzGZW2Z

Could you please just place the code in the CSS editor box of Simple Custom CSS plugin? Let me try to debug from your end.

Warmest regards,
Kharis

I placed the code in CSS. I guess the problem is that I am not sure by what the “URL of my Logo” actually is. Can I not place my logo in the editor? You can check it out as it is live. I am supposed to launch this site tomorrow and I still have issues.

thanks

Hello there,

You can upload your logo through Dashboard > Media > Add New. Once you image has been uploaded, click “Edit”. Its URL is in “File URL:” field which is located at the right side of the screen.

Warmest regards,
Kharis

OK That’s all good and fine. The main problem still persists. The logo is visible pre-scroll and disappears when scrolling begins. I would like the opposite to happen - The logo is not visible until scrolling begins

Hello there,

I noticed that you logo image in .psd format couldn’t be load https://cloudup.com/cxkRheRsG7Q

Could you please try to use .jpg or .png format instead?

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmes regards,
Kharis

Yes. I have a Jpg version. However the jpg has a white background (not clear like a psd) which creates a box when scrolling places it in the top white header area. The header area has a transparency setting which I would need to know in order to have the jpg not have a bounding box. The main problem is that the logo appears before scrolling begins.

Hello there,

> However the jpg has a white background (not clear like a psd) which creates a box when scrolling places it in the top white header area.

Could you please try to save your image in .png format https://www.youtube.com/watch?v=PLA2FaOXkkg?

> The main problem is that the logo appears before scrolling begins.

Could you please try to add the following CSS code?

.site-logo{
  display: none;
}

.header-scrolled .site-branding a{
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url('URL_TO_YOUR_LOGO_IMAGE') center center no-repeat;
  background-size: 100%;
}  

Replace the URL_TO_YOUR_LOGO_IMAGE with your image logo URL.

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

It works beautifully now. Thanks