Hi! In my testing I deactivated the code and as I already mentioned the path versions are loaded correctly if the code is inactive. White an all screen sizes.

With the active code in functions.php there is only the white one on large screens (the one defined for transpareny mode) and the blue one (normal logo) on screen sizes below 990px. Activated the code and you can see the behaviour online.

Maybe you can check CSS because what’s interesting: I don’t have the lines mentioned from Guenni007 in my layout.css. See our posts above.

Thanks in advance!

Kind regards,
Daniel

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?

In 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.

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 Ismael,

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

Hi Günter,

I replaced the old code with yours on multiple installs and everything works as expected. The editors can use the ALB and load templates from the dropdown again. Thanks a lot!

Kind regards,
Daniel

Hi Ismael,

thanks for your link. This works: https://codepen.io/dimsemenov/pen/kXGxJv

But: The arrows ar missing again. We are one big step further and have JPG and MP4 with captions and opening in lightboxes. How can I have them grouped with arrows to go from one to the next?

  <div class="isotope">
    <a class="test" title="Test title1" href="xxx.mp4?iframe=true">Vid1</a>
    <a class="test" title="Test title2" href="xxx.mp4?iframe=true">Vid2</a>
    <a class="test" title="Test title3" href="xxx.jpg?iframe=true">Img1</a>
  </div>

Script:

(function($){
$(document).ready(function() {
$('.test').magnificPopup({
  type: 'iframe',
  
  iframe: {
     markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '<div class="mfp-title">Some caption</div>'+
              '</div>'
  },
  callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');
    }
  }
  
});
});
})(jQuery);

Do you have an idea how to merge the lightboxes as you have done with your script before?

Kind regards,
Daniel

Hi Ismael,

this works! But: For images only. I use the iframe=true for mixing images and videos. Should have made that clearer:

<div class="isotope">
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="inline_popup" href="xxx.img?iframe=true"> 01 </a>
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="inline_popup" href="xxx.mp4?iframe=true"> 02 </a>
</div>

So I am back to your script because it works for images and videos but breaks the possibility to click from 01 to 02 – any idea on how to keep the arrows linking to the next frame working?

Best regards,
Daniel

Nice! Thank you Ismael, now I can load the title. But: The connection to the next images is broken! I have more pictures, connected as lightbox gallery like that:

<div class="isotope">
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="inline_popup" href="xxx.img??iframe=true"> 01 </a>
  <a alt="CUSTOM ALT HERE" title="CUSTOM TITLE HERE" class="inline_popup" href="xxx.img??iframe=true"> 02 </a>
</div>

With your code only the first image loads in a lightbox. The arrows to navigate from 01 to 02 are missing.

Can you fix that?

All the best,
Daniel

Hi Ismael,

see your post #1276219. I asked in 2021 because the line remove_filter destroys the code and again everyone is able to use ALB. You suggested to delete the first line and in this way it worked for years. And it still does, but right now the users besides administrators can’t access the ALB templates from the dropdown.

And they even get the error message when I add the remove_filter line to the code. It is like that:

With remove_filter: Everyone can use ALB exept templates
Without remove_filter: Only the user roles from the arry can use ALB exept templates

Seems as if there are certain rights necessary to use the templates and those rights aren’t granted with the function. What do you think?

Cheers,
Daniel

Hi Kriesi,

das ist doch gut zu wissen. Danke für die Info in Bezug auf euer Vorgehen. So können wir als User entsprechend planen.

Eine Empfehlung eurerseits im Backend oder Changelog in Bezug auf ein Plugin, welches ihr empfehlt, wäre super. Dann wissen wir als Endanwender, dass damit eine gute Kompatibilität gegeben ist. Danke!

Und danke auch für eure Arbeit, am Theme und hier im Forum.

Viele Grüße,
Daniel

But could I somehow disable the SVG icons? I have some pages with a lot of icons and different colors for them set in CSS as color:. Now I would have to change that to stroke: or am I wrong?

Best regards,
Daniel

Nice! Pretty shure I tried this and it didn’t work but never mind. Glad about the code. Thanks! You can delete the linked image.

A last question about the hook: Can I somehow load the logo url from the theme settings? In the Enfold theme options I link to the logo file and if I could refer to the given path there I would not have to change it in the code in the functions.php. Like:

$logo_url = URL FROM THEME OPTIONS;

Any chance to do so?

All the best,
Daniel

Hi Ismael,

that is the right direction. How can I write the if part if the logo is not in the library? Because I don’t have a ID for the logo …

Any idea?

All the best,
Daniel