Making Small logo on header disappear until scrolling down

[wendy Butcher]

Is there a way to not have the small logo appear until you scroll down on the home page or not have it on the home page but on the other pages?
On the mobile device it overlaps the type on the hero until you scroll.
It would be ideal if there was a way.
Thanks again Bill.
I will give you a huge recommendation for your support!!!!!!

Attachments:

1. 

   Screen-Shot-2016-10-25-at-10.10.04-PM.png
   

[Bill Robbins]

Good Morning Wendy,

You can hide the logo on the home page until you scroll. Here’s how to do that:

1. In your WordPress dashboard click on the Appearance section and choose Theme Options.
2. From the tabs at the top, choose the Advanced one.
3. Scroll down to the Custom CSS box and add this:

   
   .home #header #logo { visibility: hidden; }
   .home #header.scroll #logo { visibility: visible; }
   

4. Save your changes.

If you’d rather do that with all pages that have a hero area and not just the home page, you can add this instead:

.hero #header #logo { visibility: hidden; }
.hero #header.scroll #logo { visibility: visible; }

Take care,
Bill

[Author]

Posts