[Resolved] Div Below Logo On Mobiles

Home Forums Support [Resolved] Div Below Logo On Mobiles

Home Forums Support Div Below Logo On Mobiles

  • This topic has 11 replies, 3 voices, and was last updated 2 months ago by Elvin.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2015949
    Anirudh

    Hi there,

    I want to add a div below the logo but only on mobile screens. That div will then be targeted by my Ad network to place a mobile only Ad on the website. I tried using the inside_mobile_header hook. Created the div and added “ABCD” to test it on a post but nothing showed.

    Kindly help,
    Anirudh.

    #2015973
    Ying
    Staff
    Customer Support

    Hi Anirudh,

    If you use inside_mobile_header hook, then you need to make sure the mobile header option is activated in customizer > layout > header.

    Let me know πŸ™‚

    #2016943
    Anirudh

    Hi Ying.

    Thanks for your help so far. It did work. However, the “ABCD” appears alongside the logo. I want the Advertisement below the small strip which contains the logo and the menu in mobiles.

    Thanks for your time and help,
    Anirudh.

    #2016992
    Elvin
    Staff
    Customer Support

    Hi Anirudh,

    Can you link us to page in question? To inspect it for CSS writeup.

    If it’s the learnodo site, you can try this CSS:

    .inside-header {
        flex-wrap: wrap;
    }
    
    .myMmtP {
        width: 100%;
        flex: 1 0 100%;
    }

    And if you wish to center align the logo, you can add this CSS:
    /*Optional: If you want to align the logo to center*/

    @media (min-width:769px){
        .site-logo {
            margin: 0 auto 20px auto;
        }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #2019022
    Anirudh

    Hi Elvin,

    Thanks for your reply. Yes, the site is Learnodo Newtonic. I tried your solution but it didn’t work. Will it work if I use the after_header hook and then activate it only for mobile screens?

    Thanks for your help,
    Anirudh.

    #2019027
    Elvin
    Staff
    Customer Support

    To clarify:

    Are you trying to make it display like this?
    https://share.getcloudapp.com/jkuE02Dw

    If yes, the CSS provided should’ve worked assuming you’ve added it correctly. πŸ™‚

    If you have another layout in mind, can you provide a mock-up image? So I can use it as reference to base on when doing the CSS writeup. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2019098
    Anirudh

    Hi Elvin,

    We are not on the same page and sorry for not explaining the issue in detail. What I want is to create a div below the header on mobile screens only. I want to achieve this as in the current setup my CLS score is being spoilt due to the header Ad on mobiles.

    To achieve this, I activated Menu Plus and Mobile Header. Then I created a hook with the title Mobile Header Ad and then used generate_inside_mobile_header in the setting. In the hook I added a div with the class “Mobile_Header_Ad” and added dummy content “ABCD”. To test this, I activated the hook on only one post with the url: https://learnodo-newtonic.com/james-bond-facts. However, the content (“ABCD”) is being displayed in between the logo and menu. I want to display it below them.

    I plan to ask my Ad network to target this div on mobile screens so that my CLS score improves.

    I hope this makes things clear,
    Thanks,
    Ani.

    #2019113
    Elvin
    Staff
    Customer Support

    Ah if that’s the case then you can move the element by using order property:

    Try this:

    nav#mobile-header .Mobile_Header_Ad {
        order: 5;
    }

    Expected result – https://share.getcloudapp.com/qGuRnjvW

    You can see that it went down.

    Add margin: 0 auto; if you want it centered. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #2019129
    Anirudh

    It worked. Thank you so much Elvin. I wanted to ask you one more thing. If I set a width and height to this div, will it not cause layout shift?

    There is one more CLS issue I wanted to rectify. The pages on which I have used WP Show Posts are having high CLS. Is there a way to improve it? If it is necessary, I can create a separate ticket for it on the plugin’s forum.

    Thanks again for your quick replies and your help,
    Ani.

    #2019141
    Elvin
    Staff
    Customer Support

    If I set a width and height to this div, will it not cause layout shift?

    Assuming the CSS loads at the correct time and the set height and width is exactly the same as the ad that will load on it, there shouldn’t be any CSS. If the height is smaller that the ad it will contain then CLS will still occur because the reserved space isn’t enough. πŸ™‚

    There is one more CLS issue I wanted to rectify. The pages on which I have used WP Show Posts are having high CLS. Is there a way to improve it? If it is necessary, I can create a separate ticket for it on the plugin’s forum.

    The CLS doesn’t seem to be coming from WPSP (atleast on this page). Consider resolving the rest of the errors shown on console first. There’s a LOT – https://share.getcloudapp.com/E0uKO5Jz

    As for the CLS culprit: It’s usually a lazy loaded image about the fold. Usually the featured image. But in your site’s case, basing on observation, you have an ad hooked after the logo, it’s resizing on load which is effectively shifting everything below it further down. https://share.getcloudapp.com/JrunZkEp

    A wise man once said:
    "Have you cleared your cache?"

    #2019154
    Anirudh

    OK Elvin.

    You can close the ticket as resolved.

    Thanks again for all your help,
    Anirudh.

    #2020583
    Elvin
    Staff
    Customer Support

    Thank you for letting us know. No problem. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.