Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #913400

    Hello, I want to use a different Logo in the Header for mobile (smaller than 479 and between 480& 767px). I tried the code suggested in one thread I found here (Reply #910516) , but this did not work.:

    add_filter(‘avf_logo’,’av_change_logo’); function av_change_logo($logo) { if(wp_is_mobile() ) { $logo = “http://kriesi.at/wp-content/themes/kriesi/images/logo.png”; } return $logo; }

    I have an actual Iphone to check the result. But the problem is that I don`t know where to load the mobile logo in the backend….I use the One-pager-Layout, maybe this is the reason why there is no option showing?
    How can I make it work?
    Thanks for your help, Susee

    #913427

    Hey chiefsusee76,

    You have to add the logo to your media library first, and then us the link that it generates in the code above.

    Best regards,
    Jordan Shannon

    #913602

    Ah, I didn’t know that, sorry, I am pretty new to this all… I tried and then put the code in the quick CSS in the General Styling, but it did not work yet. What do I make wrong?
    Thanks, Susee

    #913627

    Hi,

    If you used the code in Quick CSS then please remove it again and put it in functions.php in your child theme.

    Best regards,
    Rikard

    #914855

    Hello, I used this code and replaced the link in the code with the link of my image. I put the code in the funcions.php file. It doesn’t work. Is this code correct? Can you check please, if there is a mistake somewhere?

    add_filter(‘avf_logo’,’av_change_logo’); function av_change_logo($logo) { if(wp_is_mobile() ) { $logo = “http://kriesi.at/wp-content/themes/kriesi/images/logo.png”; } return $logo; }

    Thanks,
    Susanne.

    #914888

    yes – seems to be ok – but if you use the code tag here on board soft it is quite better to read:
    and it’s better to copy/paste as well – because otherwise the board software converts the quotation marks

    add_filter('avf_logo','av_change_logo'); 
    function av_change_logo($logo) { 
    	if(wp_is_mobile( ) ) 
    		{ 
    			$logo = "http://kriesi.at/wp-content/themes/kriesi/images/logo.png"; 
    		} 
    	return $logo; 
    }
    #914934

    Hey chiefsusee76,

    Try copying Guenni007’s format to see if it works for you. Again, in functions.php.

    Best regards,
    Jordan Shannon

    #915521

    Hello Shannon,
    it worked, thank you. But now, the horizontal logo also shows on tablet size (porträt & landscape, iOS) – it should actually be the other one??
    Or if it is easier to solve this way: Have the top bar with horizontal logo and hamburger menu also in tablet portrait & landscape size
    Which solution would you suggest?
    Thanks, Susanne.

    #916229

    Hi,

    You would need to modify the wp_is_mobile() to exclude what you do not want to have
    Here is an option
    https://wordpress.stackexchange.com/questions/114369/excluding-ipad-from-wp-is-mobile

    but it would require also some custom coding.

    Best regards,
    Basilis

    #952570

    Hello, I still could not fix the pronblem with the logo on the tablet landscape and portrait version. The horizontal (alternative) logo still shows on tablet size (porträt & landscape, iOS) – but it should actually be the other one. Or if it is easier to solve this way: Have the top bar with horizontal (alternative) logo and hamburger menu also in tablet portrait & landscape size.

    My developer tried to put this code below, but it did not work…. could you place the right code directly on the site if I give you access or give me a custom code that works?
    Thanks so much for help, this is the last problem to be fixed!! – Susanne.

    function wp_is_mobile() {
    static $is_mobile;

    if ( isset($is_mobile) )
    return $is_mobile;

    if ( empty($_SERVER[‘HTTP_USER_AGENT’]) ) {
    $is_mobile = false;
    } elseif ( strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Mobile’) !== false // many mobile devices (all iPhone, iPad, etc.)
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Android’) !== false
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Silk/’) !== false
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Kindle’) !== false
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘BlackBerry’) !== false
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Opera Mini’) !== false ) {
    $is_mobile = true;
    } else {
    $is_mobile = false;
    }

    return $is_mobile;
    }

    #953310

    Hi,

    Thank you for the update.

    Try to adjust the first filter.

    add_filter('avf_logo','av_change_logo'); 
    function av_change_logo($logo) { 
    	if(wp_is_mobile()) { 
    	    $logo = "MOBILE LOGO"; 
    	} else {
                $logo = "DESKTOP LOGO"; 
            }
    
    	return $logo; 
    }

    Adjust the image/logo url.

    Best regards,
    Ismael

    #953443

    Hello, Ismael, thank you for your answer…waht is meant by the first filter? Where can I find it?
    Could you just send me the complete code?
    Sorry, it is really difficult for me…
    Regards, Susanne.

    #954514

    Hi,

    You can try the filter above. That is based on the first filter.

    Best regards,
    Ismael

    #958112

    Hi Ismael,
    it did not work- we also tried to combine this code with the one of this link:
    https://wordpress.stackexchange.com/questions/114369/excluding-ipad-from-wp-is-mobile
    but this caused a shut down of the site (Fatal Error). Fortunately we could restore…
    I have the feeling we are tapping in the dark here – can’t you help and put the code directly?
    Desperately, Susanne

    #958399

    Hi,

    The below code should work on your site.

    I tried to add the below code to your site but the login details do not work.

    Before you try again please make sure that there is no other code related to this issue added prior to the functions.php file.

    add_filter('avf_logo','av_change_logo');
    function av_change_logo($logo)
    {
        if(wp_is_mobile() )
        {
        $logo = "http://kriesi.at/wp-content/themes/kriesi/images/logo.png";
        }
        return $logo;
    }

    Please re-post working credentials in private.

    Best regards,
    Vinay

    #958483
    This reply has been marked as private.
    #960115

    Hi,

    How do you check if the modification works? Please note that the modification will only take effect on an actual mobile device. It’s not going to change when you resize the browser. In a desktop browser, you have to use the emulator and refresh the page. This is what I see on the browser emulator.

    // https://imgur.com/a/3LJQMoM

    Best regards,
    Ismael

    #962036

    Hi Ismael,
    thank you for your help.
    I check on an Apple iPad Air 2. Running with the actual System.
    On my iPhone 6, also actual system, it looks perfect. Only the iPad is a problem .
    But maybe it is my iPad?
    This simulator shows it right:

    Do you have an explanation for me to understand why it looks right on the simulator but my iPad shows something else?
    Thanks a lot, Susanne.

    • This reply was modified 5 years, 6 months ago by Victoria.
    #962962

    Hi,

    The word “Mobile” exists in the iPad 2’s user agent string so it should be detected as a mobile device by the wp_is_mobile function.

    Mozilla/5.0(iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.
    

    Did you remove the browser cache on that device?

    Best regards,
    Ismael

    #964141

    Hello Ismael, yes I removed the Cache – still, it shows the site differently as in the simulator. Very strange…
    Tested with Safari. Best regards, Susanne.

    #965244

    Hi,

    Thanks for the update. Please add this script along with the previous one. Don’t forget to use the actual IMAGE URL.

    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    	?>
    	<script type="text/javascript">
    		(function($)) {
    			$(document).ready( function() {
    				if($(window).innerWidth() <= 1024){
    					$('.logo img').attr('src', 'IMAGE URL HERE');
    				}
    			});
    		})(jQuery);
    	</script>
    	<?php
    }

    Best regards,
    Ismael

    #970012

    Hello Ismael,
    oh my…I don’t get it….so you mean put it after the previous code? Or mix it?
    Please, could you do this last tweak for me? Thanks a lot, Susanne

    #970750

    Hi chiefsusee76,

    Ismael suggested adding this last code below the previous code.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1098454

    Please remove the link to
    http://www. responsimulator.com
    because it is at the moment an infected website
    Mauro

    #1098946

    Hi Mauro,

    Thank you for your input. I removed the link.

    Best regards,
    Victoria

    #1220172

    hi, i used the code in functions php, to change logo on mobile, but logo is shrinking to fit container.. how can i get the right logo format on mobile?
    www.http://www.sviluppo-laycon.it/vinciecampagna

    thanks in advance!

    #1220374

    Hi,


    @DesignProvider
    : What do you mean by its shrinking to fit container? Please open a new thread and provide a screenshot of the issue. You can use imgur or dropbox for the screenshot. We’ll close this thread now.

    Best regards,
    Ismael

Viewing 27 posts - 1 through 27 (of 27 total)
  • The topic ‘Different Logo in the Header for mobile version’ is closed to new replies.