Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 10, 2017 at 2:35 pm #758905
    web_kings

    add_filter(‘avf_logo’,’av_change_logo’);
    function av_change_logo($logo)
    {
    if(wp_is_mobile() )
    {
    $logo = “http://domain.com/path/logo.png”;
    }
    return $logo;
    }

    I am trying to change the logo for a mobile using the function above, I have placed in the child themes function page but it does not seem to work with current version of enfold, any ideas?

    • This topic was modified 7 years, 8 months ago by web_kings.
    March 10, 2017 at 2:37 pm #758908
    Guenni007
    function av_dif_mobile_logo(){
?>
 <script>
jQuery(window).load(function(){
if (jQuery(window).width() < 480) {
jQuery(".logo img").attr("src", "url to the new logo")
}
});
 </script>
<?php
}
add_action('wp_footer', 'av_dif_mobile_logo');

    try this !

    March 10, 2017 at 2:39 pm #758910
    Yigit

    Hey!

    Please refer to @guenni007’s post above.

    @guenni007     Thanks as always :)

    Regards,
    Yigit

    March 10, 2017 at 2:57 pm #758922
    Guenni007

    or maybe better:

    function avia_custom_mobile_logo(){
if(wp_is_mobile()){
?>
 <script>
jQuery(".logo img").attr("src", "http://kriesi.at/wp-content/themes/kriesi/images/logo.png")
 </script>
<?php
}
}
add_action('wp_footer', 'avia_custom_mobile_logo');
    March 10, 2017 at 3:19 pm #758948
    web_kings

    The first script thanks Guenni007, has a slight delay, causing a blink with the original logo being updated with the mobile logo.

    • This reply was modified 7 years, 8 months ago by web_kings.
    March 10, 2017 at 3:54 pm #758969
    web_kings

    Is there a way of editing the template, So I could add 

    <div class="logo">
  <img src="/images/logo_desktop.png" class="desktop" />
  <img src="/images/logo_mobile.png" class="mobile />
</div>

    Then use CSS to show which one?

    • This reply was modified 7 years, 8 months ago by web_kings.
    March 10, 2017 at 4:44 pm #759005
    Guenni007

    did you try the second snippet – i think its better for your site
    or get rid of the loading case

    • This reply was modified 7 years, 8 months ago by Guenni007.
    March 10, 2017 at 8:34 pm #759116
    Yigit

    Hi,

    Are you using a transparent logo? If you are not, you can refer to this post – http://kriesi.at/documentation/enfold/add-subtext-to-logo-replace-logo-with-site-title/ and add your mobile using HTML version and then add following code to Quick CSS

    @media only screen and (min-width: 481px) { 
.subtext { display: none; }
} 
@media only screen and (max-width: 480px) { 
.responsive .logo > a > img { display: none; }
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.