Logo as SVG

Hi Ismael,

on an other page I have the header on mobile sticky and transparent too (avia-sticky-header.js). See link.

No, I did not remove it. Just go below 990px width. Than the alternate logo part is hidden by display: none.

The longer I think about it I think the problem isn’t the filter. It is because of the changes in avia-sticky-header.js and that those aren’t reflecting the two different logo types …

Hi Mike,

it is about the logo that changes in header before scroll. After scroll everything is fine. Before scroll there is a white logo (the one defined for transpareny mode) shown on large screen sizes (white). On smaller screens the transparency mode logo is overruled by the normal one (blue).

I think I can sort it out with css but am curious if there is an error in the filter (see above) or is it because of the altered avia-sticky-header.js.

All the best,
Daniel

Hi Mike, as I said: It is not about the small round one. Everything finde with that. And it is not about a transparent background either. The logo in the header is different for the mobile versions and the desktop version. For the desktop version (above 990px) the logo is white (as defined in the theme’s transparency settings) and for the mobile/smaller versions it is blue – that is the normal logo, not the one defined in the theme’s transparency settings. Now my question is: Why? Is anything of the transparency logic defined in avia-sticky-header.js? Than this could be the reason, because I altered the avia-sticky-header.js

Hi :-) The svg is loaded as image!

function avf_no_inline_svg_mod($attachment_id, $url) {
    $logo_url = avia_get_option( 'logo' );
	$logo_url_transparency = avia_get_option( 'header_replacement_logo' );

    if ($url && $url == $logo_url || $url && $url == $logo_url_transparency) {
        return true;
    }

    return false;
}
add_filter('avf_no_inline_svg', 'avf_no_inline_svg_mod', 10, 2);

That works as expected on larger screens. But not on mobile. If the header is fixed and shrinking on mobile too. That’s why I changed the avia-sticky-header.js with a code from you, found in the forum.

That is correct. But sometimes SVGs are quite complex in structure and for those cases I use the code above to load them as a file rather than the path. I can sort it out with CSS, no problem. But I dont’t understand the behaviour right now. Is anything in avia-sticky-header.js relevant for loading the logo from the theme’s transparency settings on mobile?

In avia-sticky-header.js?

I basically agree with you. But that means having the appropriate files, editing them if necessary and in addition writing CSS rules for the display in the transparent header. That’s a lot of work (if you’re responsible for a lot of homepages) and that is why I like to continue working with SVGs as linked files. This also makes exchange of a logo easier. In my opinion.

Unfortunately my question has still not been answered: Is it defined somewhere in avia-sticky-header.js which logo file is loaded for the transparent header? Is there a difference with regard to mobile screens? If so, I would have to take another look at the file and make the necessary adjustments.

I built that code with Ismael in an other thread. Works on multiple installations for me. All with Enfold 7.1.1. In the theme settings I put the logos as SVG files and those files are loaded in the frontend. As it used to be in older Enfold versions.

Now I double checked the avia-snippet-sticky-header.js and see it just as you described: only styling of the header, no tweaking of the logo

On an other installation I tried the code and it is working as expected, but same behaviour on mobile: the normal logo is loaded, not the one defined in the transparency settings.

I believe it is because usually the header isn’t transparent on mobile. Even with header set to transparent in backend it is only transparent for the larger screen sizes. On mobile the header is normal and therefore the normal logo is loaded and used instead of the one from the transparency settings.

My conclusion is that I will have to sort it out with CSS since both logos are available in the code.

But what’s interesting: If I use the SVGs as path (without the code mentioned above) the version from the transparency settings is used on mobile too. That’s different to older Enfold versions and to the behaviour with a logo as image file. Or am I wrong?

Thank you for giving it a try. Very interesting. In my installations there is the following CSS:

@media only screen and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 1;
  }
}
@media only screen and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: none;
  }
}

Don’t know where it comes from. The first shows the normal logo, the second hides the alternate version below 990px. That’s exactly the error.

In your installation it is like that:

#top .av_header_transparency.av_alternate_logo_active .logo a > img, #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
  opacity: 0;
}

.av_header_transparency .logo img.alternate, .av_header_transparency .logo .subtext.avia-svg-logo-sub svg {
  opacity: 1;
}

No query whatsoever. But the CSS above is not from me. It has to be from Enfold.

Your test is: Logo in backend, alternate logo in backend, code from above in functions, page set to “transparent header” – correct?

Yes. That’s very interesting. Never stumbled over this part of layout.css even with some fixed and transparent headers for mobile on various homepages. Therefore the code in functions.php is correct and the logo is loaded as SVG file but by CSS the normal version is shown on smaller screens. Sorted the CSS and now everything is as expected.

Thanks to all helping hands for bringing light into the darkness!