Logo Animation and a couple other things

I was wondering if there was a way to have the logo reduce in size as you scroll down. I think that when the logo is In Line it does that but I want it to happen with the menu centered so that it starts at a max height of around 200px and then it goes down to like 50px.

Also I wanted to know if I could have both the Logo and the Site name and tag line show at the same time (site name and tag underneath the logo). Can this be done?

And my last question is what is the css class/id/handle I would need to use to style that site tile and tag line with a simple CSS plugin.

Thanks and sorry about all the questions.

Do you have a url to your site?


The home itself isn’t built yet but you can see the slider and stuff


Here is the css code to decrease the size of the image logo when you scroll the page down, you can put the code below using custom css plugin:

.site-header.float-header img.site-logo {
    max-height: 80px !important;

And then, if you want to display both the site title and tag line below the logo, you have to create a child theme.

Thanks Awa, the logo size modification works, but I was wondering if there is a CSS way of making it reduce the size when you start scrolling. To be exact, I want it to be 250 px tall when you are at the top of the page and then animate to 80 px tall once the menu is floating above the page as you scroll.

Is that possible?

Oh I see, here is your code:

  • this should work when you are at the top of the page
.site-header img.site-logo {
    max-height: 250px !important;