How to Show Google Adsense Ad Below Navigation Menu in GeneratePress?

Hi there,

Not sure if I fully understand.

What is the issue here?

Please be mindful that we cannot provide custom style for Google ads in this forum.

Let me know if I’m missing something ??

Hi Leo,
You haven’t understood the problem correctly.
I have recently added Google Adsense ad code below the primary navigation menu, but the ad is not showing properly. The ad is showing too large and does not align in the center.
You can see the image below.

According to me, we have to add CSS code to define the width and height of the container to fix this problem. 728 x 90 Adsense header ad looks good on the desktop so please help me to fix this problem.

Hi there,

how was the advert added to the site?

Hi David,
I have added Adsense Ad code via a hook (after_header).

• This reply was modified 4 years, 4 months ago by Shivam Pandey.
• This reply was modified 4 years, 4 months ago by Shivam Pandey.

Try adding the script inside a container like so:

<div class="grid-container header-advert">
    <!-- Ad script goes here -->
</div>

David, below I mentioned a sample Google AdSense code, have I add the code correctly inside the container.

Note: I am using AdSense Invalid Click Protector (AICP) plugin to protect my Google AdSense account from unusual invalid click activities and click bombings so I need to wrap the AdSense ad code within a simple div tag like this <div class=”aicp”>…adsense code here…</div>

So is the below code is okay without any error?

<div class="grid-container header-advert">
<div class="aicp">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header Ads 2 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>

• This reply was modified 4 years, 4 months ago by Shivam Pandey.
• This reply was modified 4 years, 4 months ago by Shivam Pandey.

I am not seeing that code on your site?

David, you can check now, I have cleared the website cache and please read the above message once again, because I have updated it.

Ok – i can see the new code. And it looks like it is working to me.
Try clearing your browser caches.

David, I cleared the cache once again and I see that the AdSense Ad is showing inside the container and it is perfectly center aligned. As I already told you that I am using AdSense Invalid Click Protector (AICP) plugin, so I need to wrap the AdSense ad code within a simple div tag like this <div class=”aicp”>…adsense code goes here…</div>

So can you please check that the below code syntax is okay without any problems or errors?

<div class="grid-container header-advert">
<div class="aicp">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header Ads 2 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>

So can you please check that the below code syntax is okay without any problems or errors?

That code is correct and fine to use.

David, is there any CSS code that will define the width and height of the container, so the Adsense ad will be showing in the leaderboard 728×90 size on the desktop and responsive size on mobile. Please help me…

You can use some CSS like this to limit the width of the parent container:

body .grid-container.header-advert {
    max-width: 728px;
}

But thats all we can do.

David, nothing happens after applying this CSS code. I also cleared the website cache and check in the incognito window.
You can see the image below.

I want to show Google AdSense Ad below the navigation menu like the image below.

Please help me to fix this problem.

You can try this:

body .grid-container.header-advert {
    max-width: 728px;
    max-height: 90px;
    box-sizing: border-box;
}

But that is as much as we can offer. As we are not responsible for or able to change the size of the adverts your ad service is providing.