[Resolved] Div Below Logo On Mobiles

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

[Ying]

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 🙂

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

[Elvin]

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

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

[Elvin]

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

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

[Elvin]

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

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

[Elvin]

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

[Anirudh]

OK Elvin.

You can close the ticket as resolved.

Thanks again for all your help,
Anirudh.

[Elvin]

Thank you for letting us know. No problem. 😀

[Author]

Posts