Different Logo in the Header for mobile version - Support | Kriesi.at

Viewing 27 posts - 1 through 27 (of 27 total)

Author

Posts
February 16, 2018 at 9:56 pm #913400

chiefsusee76
Participant

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

February 16, 2018 at 10:53 pm #913427

Jordan Shannon
Inactive Moderator

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

February 17, 2018 at 10:34 am #913602

chiefsusee76
Participant

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

February 17, 2018 at 1:27 pm #913627

Rikard
Keymaster

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

February 20, 2018 at 3:22 pm #914855

chiefsusee76
Participant

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.

February 20, 2018 at 4:49 pm #914888
Guenni007
Participant
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; 
}
```
February 20, 2018 at 6:03 pm #914934

Jordan Shannon
Inactive Moderator

Hey chiefsusee76,

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

Best regards,
Jordan Shannon

February 21, 2018 at 3:43 pm #915521

chiefsusee76
Participant

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.

February 22, 2018 at 7:39 pm #916229

Basilis
Inactive Moderator

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

May 7, 2018 at 10:23 am #952570

chiefsusee76
Participant

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;
}

May 8, 2018 at 11:27 am #953310
Ismael
Moderator
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
May 8, 2018 at 4:23 pm #953443

chiefsusee76
Participant

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.

May 10, 2018 at 12:44 pm #954514

Ismael
Moderator

Hi,

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

Best regards,
Ismael

May 17, 2018 at 12:02 pm #958112

chiefsusee76
Participant

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

May 18, 2018 at 3:46 am #958399
Vinay
Inactive Moderator
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
May 18, 2018 at 9:10 am #958483

chiefsusee76
Participant

This reply has been marked as private.

May 22, 2018 at 4:40 am #960115

Ismael
Moderator

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

May 25, 2018 at 11:34 am #962036
chiefsusee76
Participant
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, 7 months ago by Victoria.
May 28, 2018 at 8:19 am #962962
Ismael
Moderator
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
May 30, 2018 at 11:40 am #964141

chiefsusee76
Participant

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.

June 1, 2018 at 12:06 pm #965244
Ismael
Moderator
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
June 8, 2018 at 8:58 am #970012

chiefsusee76
Participant

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

June 10, 2018 at 12:18 pm #970750

Victoria
Inactive Moderator

Hi chiefsusee76,

Ismael suggested adding this last code below the previous code.

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

May 8, 2019 at 1:58 pm #1098454

profumopuntoit
Participant

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

May 9, 2019 at 3:22 pm #1098946

Victoria
Inactive Moderator

Hi Mauro,

Thank you for your input. I removed the link.

Best regards,
Victoria

June 7, 2020 at 11:29 am #1220172

DesignProvider
Participant

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!

June 8, 2020 at 8:21 am #1220374

Ismael
Moderator

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
Author

Posts

Viewing 27 posts - 1 through 27 (of 27 total)

The topic ‘Different Logo in the Header for mobile version’ is closed to new replies.