-
AuthorPosts
-
April 10, 2021 at 12:45 am #1293585
Hi,
I have the weirdest thing in that the mobile logo isn’t work on all the pages when viewed in mobile. And, then some pages on the desktop show the mobile version. Also, not so much a problem with Chrome (desktop) but show up in Safari and Firefox. Also seems like the same pages are have the problem – meaning three pages – Education, Archives and The Inlet show the right logo in mobile but also the mobile logo on Desktop. The rest of the pages when viewed in mobile have the wrong logo.
April 12, 2021 at 11:55 am #1293913Hey mclweb,
Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.
Best regards,
RikardApril 12, 2021 at 6:58 pm #1293986Temp login in private.
Thanks in advance.
April 15, 2021 at 6:05 am #1294477Hi,
Thank you for the update.
We cannot seem to reproduce the issue on our end, as seen in the screenshot below.
Screenshot: https://imgur.com/3cEBC1d
Would you mind providing a screenshot of the issue?
Best regards,
IsmaelApril 15, 2021 at 6:47 pm #1294615How do I seen you a screenshot?
April 16, 2021 at 7:31 pm #1294829Added screenshot. See link in private.
Thanks.
April 19, 2021 at 5:01 am #1295069Hi,
The logo there looks different from the ones we have checked. How did you change the logo on that specific page? And how would you like the header to look like on mobile view?
We also found this style in the Quick CSS field, which might require some adjustment.
.logo img { padding-top: 15px; margin-top: 15px !important; z-index: 99999999 !important; position: relative; margin-bottom: -17px !important; } .logo img { margin: 15px !important; z-index: 99999999 !important; position: relative; }
Best regards,
IsmaelApril 19, 2021 at 8:20 pm #1295342I have two different logos; one for desktop and for mobile. Using the Theme Editor > functions.php I’ve added this code:
@ini_set( ‘upload_max_size’ , ’50M’ );
@ini_set( ‘post_max_size’, ’50M’);
@ini_set( ‘max_execution_time’, ‘1000’ );add_filter(‘avf_logo’,’av_change_logo’);
function av_change_logo($logo) {
if(wp_is_mobile( ) )
{
$logo = “https://monova.ca/wp-content/uploads/2020/05/monova-mobile.png”;
}
return $logo;
}The logo on all mobile version pages should have the logo above. The mobile version should look like the screenshot you sent me. I don’t know why it shows up on some pages in mobile but other pages in mobile have the desktop logo.
I will go clean up the quick css you found.April 19, 2021 at 8:25 pm #1295345Also, of the quick css that you sent. One controls the placement of the logo on desktop and one on mobile. There is a media screen on one
/* placement of mobile logo
@media only screen and (max-width: 768px) {
.logo img
{
padding-top: 15px;
margin-top: 15px !important;
z-index: 99999999 !important;
position: relative;
margin-bottom: -17px !important;
}
}/*placement of logo on desktop.
.logo img {
margin: 15px !important;
z-index: 99999999 !important;
position: relative;
}April 21, 2021 at 7:04 am #1295692Hi,
For some reason, the logo filter only works in the archives page. Please try to install this plugin to enhance the wp_is_mobile function.
// https://wordpress.org/plugins/tinywp-mobile-detect/
You can also try this script.
// change logo on mobile view add_action('wp_footer', 'ava_mobile_logo'); function ava_mobile_logo() { ?> <script> (function($){ var isMobile = false; if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { isMobile = true; } if( isMobile ) { $('.logo img').attr('src', 'MOBILE LOGO IMAGE URL HERE') } })(jQuery); </script> <?php }
Just replace “MOBILE LOGO IMAGE URL HERE” with the actual image URL.
Best regards,
IsmaelApril 26, 2021 at 7:31 pm #1296818Hi Ismael,
I tried the plugin. didn’t seem to help. I tried adding your code but it said there was an error and wouldn’t allow me to save.
Seems so odd that this is happening on only some pages. What could be holding up those pages?
Got any other ideas?
Thanks for you help.
Sarah
April 29, 2021 at 10:23 am #1297286Hi,
Thank you for the update.
Can we access the site again? The token above has already expired. Please provide another token or an admin account so that we could check the site further. Make sure that the Appearance > Editor panel is accessible.
Best regards,
IsmaelApril 29, 2021 at 7:39 pm #1297406Hi Ismael,
Thanks for sticking with me on this.
I’ve extended the login.
Looked for Editor panel but not clear on what that is or at least that term.
Thanks again,
Sarah
April 30, 2021 at 12:50 pm #1297543Hi,
Thank you for the token.
We added the ava_mobile_logo script in the functions.php file and disabled the litespeed cache plugin temporarily. It seems to be displaying the appropriate version of the logo on mobile view now. Please do not forget to purge the cache, remove the browser and do a hard refresh before checking the page on mobile.
Best regards,
IsmaelMay 1, 2021 at 3:19 am #1297654Looks perfect!!!
Thanks so much. You guys are great.
Sarah
May 3, 2021 at 6:44 am #1297891Hi Sarah,
We’re glad to hear that :)
Thanks for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘Wrong logo on mobile and some desktop pages’ is closed to new replies.