Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #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.

    #1293913

    Hey 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,
    Rikard

    #1293986

    Temp login in private.

    Thanks in advance.

    #1294477

    Hi,

    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,
    Ismael

    #1294615

    How do I seen you a screenshot?

    #1294829

    Added screenshot. See link in private.

    Thanks.

    #1295069

    Hi,

    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,
    Ismael

    #1295342

    I 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.

    #1295345

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

    #1295692

    Hi,

    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,
    Ismael

    #1296818

    Hi 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

    #1297286

    Hi,

    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,
    Ismael

    #1297406

    Hi 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

    #1297543

    Hi,

    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,
    Ismael

    #1297654

    Looks perfect!!!

    Thanks so much. You guys are great.

    Sarah

    #1297891

    Hi Sarah,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Wrong logo on mobile and some desktop pages’ is closed to new replies.