Sticky Header: Hide the Logo when scrolling down - Support | Kriesi.at

Tagged: header, logo, sticky

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

Author

Posts
February 18, 2017 at 8:42 pm #748888

Mike
Participant

Hi.

first of all: If there already is a solution to my problem somewhere in this Forum just send me the url. I was searching, but couldn’t find anything.

My Settings: “Logo center, Menu below”, “Sticky Header: Yes”
How can I hide the Logo when scrolling down? I just want the Menu sticking to the top?

Thx
Mike

February 18, 2017 at 10:22 pm #748901
Mike
Moderator
Hey mikschne,
To hide the logo when scrolling down, ensure your logo is in Enfold Theme Options > Header > Transparency Logo
After that, use this code in the General Styling > Quick CSS field:
```
.header-scrolled .logo img { display: none; }
```
Best regards,
Mike
February 19, 2017 at 2:09 pm #748994

Mike
Participant

Thank you Mike!

But that doesn’t work. Why does the Logo have to in “Transparency Logo” at all? Isn’t this just CSS?
But ok, I put it in and added the code, but Logo is still visible when scrolling down.

Any other idea?

Regards,
Mike

February 19, 2017 at 9:08 pm #749060
Mike
Moderator
Hi Mike,
Ok, lets start over (undo above) by adding this code to your functions.php to hide the logo on scroll:
```
function add_hide_logo(){
?>
<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 100) jQuery('.container.av-logo-container').fadeOut('slow');
if(jQuery(this).scrollTop() < 100) jQuery('.container.av-logo-container').fadeIn('slow');
});
</script>
<?php
}
add_action('wp_footer', 'add_hide_logo');
```
When editing functions.php you should use the child theme, Read about it & Get it here
Best regards,
Mike
February 21, 2017 at 11:55 am #749878

Mike
Participant

Thanks Mike!

It works. But it’s not the most elegant way, not pretty smooth, if you know what I mean. :)
Maybe I have to deal with the fact, that the logo is not hiding when scrolling down.

Thanks anyway.

Regards,
Mike

February 22, 2017 at 12:18 am #750206

Mike
Moderator

Hi,
You can change the screen distance at which it hides by changing the “100” to 50 or 200.
You can also change the fadeOut / fadeIn options to fast, slow, or a number that represents thousands of a second, such as ‘2000’, to control the time of the fade.
I hope these options help you refine your logo hiding experience.

Best regards,
Mike

February 22, 2017 at 2:51 pm #750506

Mike
Participant

Thanks for your help. I’ll put that on my list for the next weeks… :)
Author

Posts

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

The topic ‘Sticky Header: Hide the Logo when scrolling down’ is closed to new replies.