Banner Advertisement on Header

Dazzling
1

Hi,

How do I add a horizontal banner advertisement right on top of my homepage? I want it to align right.

2

Just to clarify, I want the horizontal banner advertisement to be above my navigation bar.

This is my site: http://souperdiaries.com/ I want to place the banner on top of ‘Home, Slow Simmer Soups, Quick Soup Recipes, etc.’

3

Hi @yvonne,

I hope you are well today and thank you for your question.

You can add a horizontal banner advertisement right on top of navigation bar by using the child theme attached to the following reply and as described there to add code in the appropriate place.

https://colorlibsupport.com/t/add-an-area-above-menu/#post-37558

Best Regards,
Movin

4

"you can achieve it by using the attached child theme of Dazzling theme that contains header.php file.

In the header.php file of the attached child theme you can add custom code on line number 24 in between the following lines of code to display the area above header.

<div id=“page” class=“hfeed site”>

&lt;nav class="navbar navbar-default" role="navigation"&gt;

Thanks for your reply. Where do I find the attached child theme of Dazzling theme?

5

Hi @yvonne,

Thanks for your reply. Where do I find the attached child theme of Dazzling theme?

You will find it in the following thread as shown in the attached screenshot.

https://colorlibsupport.com/t/add-an-area-above-menu/#post-37558

Best Regards,
Movin

6

“How do I find the header.php file of my child theme to insert the banner code?”

"You will find it on your server in the WordPress install directory on the following path.

/wp-content/themes/child-theme/header.php"

Hi Movin,

Please pardon my ignorance but I don’t know where is the server in my Wordpress install directory. Where do I find it?

Yvonne

7

Update: I found my header file and added the custom code on line 24.

How can I centralize the banner and bring it slightly lower? It is aligned to the left now and stuck to the top. Please refer to screenshot to see how I’d like it to be.

I can see a banner displayed when viewing from my laptop. But why is it not showing up when viewed on mobile?

Yvonne

8

This is what my header file currently looks like:

9
How can I centralize the banner and bring it slightly lower? It is aligned to the left now and stuck to the top. Please refer to screenshot to see how I’d like it to be.

Please try doing this by adding the following CSS code in the style.css file of your child theme.

#page > ins.adsbygoogle {
    width: 735px;
    margin: 0 auto;
    overflow: hidden;
    max-width: 100%;
    margin-top: 10px;
}
I can see a banner displayed when viewing from my laptop. But why is it not showing up when viewed on mobile?

You might have configured it to disable on mobile devices or didn’t make it responsive as described on the below pages.

You can contact Google adsense support team regarding this.

10

Hi Movin,

Thanks for your reply. I would like to reduce the gap between the Google ad and navigation bar by about 3mm.

Regarding the responsiveness, I will check my code and get back to you.

11

You can reduce the gap between the Google ad and navigation bar by using the below CSS code.

#page nav.navbar.navbar-default {
    padding-top: 35px;
}

Please change the value 35px in the above code to reduce or increase the gap between them.

12

Thanks Movin. The Google ad is showing up on my mobile now.

13

You are most welcome here :slight_smile:

14

i have found its best answer in blogger blog at amp adsense ads in blogger header

15

@cnagda33 Please do not use this forum for cross linking.