[Support request] Unload header widget in mobile

Home Forums Support Unload header widget in mobile

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1434908
    Evenit

    Hi, I’m using Header Mobile for the mobile version of my site.
    Performance test softwares (e.g. Lighthouse) detect the image I have inserted in the header widget is also loaded in the mobile version of my site. Since this image is displayed just on the desktop version, wouldn’t it be possible not to load it?

    #1435144
    David
    Staff
    Customer Support

    Hi there,

    Any chance you can link me to the site – so i can see if any better options exist.

    Edit your original topic and use the Site URL field to share a link privately.

    #1435178
    Evenit

    Ok, I have updated the original topic with the site url

    #1435261
    David
    Staff
    Customer Support

    How about we use a Hook element to place the image. So remove the header widget.

    Create a new Hook Element:
    https://docs.generatepress.com/article/hooks-element-overview/

    Insert this PHP and HTML:

    <?php
    if ( !wp_is_mobile() ) {
        ?><a href="add_your_link_url"><img src="https://your-site/full_url_to_image.jpg"></a><?php
    }
    ?>

    Select the generate_after_header_content hook

    And set the Display Rules to Entire Site.

    The wp_is_mobile function ‘should’ detect its a mobile device and only output the HTML if it is !not a mobile device.

    Once thats in there it will require a little CSS which i can help with.

    #1436624
    Evenit

    Done, I have used generate_header hook since I did not find inside_header hook, is it correct?

    If is ok may you help me with CSS ?

    #1436640
    David
    Staff
    Customer Support

    Doh — must have been having a brain freeze.
    Select the generate_after_header_content hook.

    #1436798
    Evenit

    🙂
    done

    #1436898
    David
    Staff
    Customer Support

    Remove the header widget.
    And then add this CSS:

    .inside-header {
        display: flex;
        align-items: center;
    }
    .inside-header .site-logo {
        margin-right: auto;
    }
    #1437725
    Evenit

    thanks

    #1437755
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.