CSS code for Enlarging logo and shrinking logo when scrolling down - Support

Tagged: css code, enfold, enlarge, logo, shrink

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
January 7, 2020 at 11:41 pm #1171277

kenny_iic
Participant

Hi,

I have a few questions regarding logo and header. I want to have a larger logo when people enter the site on the homepage, but I would like it to shrink when they scroll down. In fact, I wouldn’t mind having it completely disappear if that’s possible. The logo is centered and above the menu.

I have tried searching other forum topics, but the css code doesn’t seem to work for me.

Also, Is it possible to have a transparent header on other pages other than your home page?

Please help. Thank you for taking the time to read this.

January 8, 2020 at 4:23 pm #1171506
Yigit
Keymaster
Hi,

1- You can go to Enfold theme optioons > Header and increase header height and logo would adapt. Then you can add following code to Quick CSS in Enfold theme options > General Styling to hide logo when scrolled down
```
.header-scrolled .av-logo-container {
    display: none;
}
```
2- You can simply edit your pages and choose to display transparent header under layout section – https://imgur.com/a/NzT1dd6 :)

Best regards,
Yigit
January 9, 2020 at 1:08 am #1171666

kenny_iic
Participant

Hi Yigit,

Thank you so much! that totally worked!

I am having trouble adjusting the bottom padding under the logo and the header height as well. There seems to be a very big gap between the two. Is there anything I can do to adjust that?

January 9, 2020 at 9:51 am #1171728
Rikard
Keymaster
Hi,

Thanks for the update. Please try this CSS as well:
```
.av-logo-container {
    height: 115px;
    line-height: 115px;
}
```
Or try to adjust the height of the header in the theme options under Enfold->Header->Header Size.

Best regards,
Rikard
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.