Logo change when scrolling

Hey brandhands,

Try adding this php code at the bottom of functions.php:

function add_custom_script(){
?>
<script>
var $document = $(document),
    $element = $('#header'),
    className = 'hasScrolled';

$document.scroll(function() {
  if ($document.scrollTop() >= 5) {
    $element.addClass(className);
  } else {
    $element.removeClass(className);
  }
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

then add this css code in Quick CSS (located in Enfold > General Styling):

#top #header.hasScrolled .logo, 
#top #header.hasScrolled .logo a {
    height: 80px !important;
}

#top #header.hasScrolled .logo img {
    content: url('image');
    max-height: 80px;
}

Just replace image with the logo you posted in private content. Hope this helps :)

Best regards,
Nikko

Hi,

I have checked your site and it seems to be working fine. Can you tell us how we can see the problem? what do you mean by the image doesn’t work? we’ll try to help you with it once we can reproduce it on our end.

Best regards,
Nikko

Hi,

I see, it’s all good in chrome but it doesn’t work on firefox, I added this css code in your Quick CSS (located in Enfold > General Styling):

#top #header.hasScrolled .logo a {
    background-image: url(https://herbon.de/soldier/wp-content/uploads/2018/02/ofpt_apfel_transp_80.png);
    max-height: 80px;
}

#top #header.hasScrolled .logo img {
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
}

Let us know if this works on your end. :)

Best regards,
Nikko

Hi,

Glad that we could help. :) Let us know if you need further assistance or if we can close this thread.

Best regards,
Nikko

Hi,

You can do that from the settings of the section, the element can go full width.

Best regards,
Basilis

Hi jimmiesner,

Can you try to create a separate thread? and give us temporary admin access, just post the details in private content so the details can only be seen by the moderators and the thread creator. Also please add a link to this thread on that new thread so we can use as a reference :)

Best regards,
Nikko