-
AuthorPosts
-
February 16, 2018 at 9:56 pm #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, SuseeFebruary 16, 2018 at 10:53 pm #913427Hey 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 ShannonFebruary 17, 2018 at 10:34 am #913602Ah, 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, SuseeFebruary 17, 2018 at 1:27 pm #913627Hi,
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,
RikardFebruary 20, 2018 at 3:22 pm #914855Hello, 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 #914888yes – 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 marksadd_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 #914934Hey chiefsusee76,
Try copying Guenni007’s format to see if it works for you. Again, in functions.php.
Best regards,
Jordan ShannonFebruary 21, 2018 at 3:43 pm #915521Hello 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 #916229Hi,
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-mobilebut it would require also some custom coding.
Best regards,
BasilisMay 7, 2018 at 10:23 am #952570Hello, 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 #953310Hi,
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,
IsmaelMay 8, 2018 at 4:23 pm #953443Hello, 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 #954514Hi,
You can try the filter above. That is based on the first filter.
Best regards,
IsmaelMay 17, 2018 at 12:02 pm #958112Hi 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, SusanneMay 18, 2018 at 3:46 am #958399Hi,
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,
VinayMay 18, 2018 at 9:10 am #958483This reply has been marked as private.May 22, 2018 at 4:40 am #960115Hi,
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,
IsmaelMay 25, 2018 at 11:34 am #962036Hi 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.
May 28, 2018 at 8:19 am #962962Hi,
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,
IsmaelMay 30, 2018 at 11:40 am #964141Hello 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 #965244Hi,
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,
IsmaelJune 8, 2018 at 8:58 am #970012Hello 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, SusanneJune 10, 2018 at 12:18 pm #970750Hi chiefsusee76,
Ismael suggested adding this last code below the previous code.
If you need further assistance please let us know.
Best regards,
VictoriaMay 8, 2019 at 1:58 pm #1098454Please remove the link to
http://www. responsimulator.com
because it is at the moment an infected website
MauroMay 9, 2019 at 3:22 pm #1098946Hi Mauro,
Thank you for your input. I removed the link.
Best regards,
VictoriaJune 7, 2020 at 11:29 am #1220172hi, 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/vinciecampagnathanks in advance!
June 8, 2020 at 8:21 am #1220374Hi,
@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 -
AuthorPosts
- The topic ‘Different Logo in the Header for mobile version’ is closed to new replies.