Follow us on Youtube.  | Follow Website !

Search Suggest

So that the Header or Navigation Does not Shift Down When the Page Level Ads Appears

So that the Header or Navigation Does not Drop Down When Page Level Ads Appears

In the previous article we learned to create Page Level Ads which by default will appear hovering on the screen, but can also be modified to appear below. Now we move on to other modifications that can be applied safely on the blog.

When the Page Level Ads appears either on top or bottom, it will push other HTML elements so that their position will shift. Like this example, it will shift the header or navigation so that the element is a distance from the top border of the screen.

Prevents Navigation Headers from Scrolling Down Due to Page Level Ads

However, there are some people who actually don't like it when the header is slid downwards. Are you the one who likes the header to stay on top or not? If so, please read through the tutorial to make the header position not drop down due to the following Page Level Ads.

How To Fix Header Position Above When Page Level Ads Appear

This trick only takes 1 line of code that isn't even up to 30 characters! Wow!

  1. Make sure you have posted Page Level Ads on the blog first. Then enter the HTML settings and look for the CSS code from the selector body.
  2. Add the following code in it without deleting the existing code:
    padding:0px !important;
    If there is already a property padding, just change its value to 0px !important.
  3. The result is something like this:
    body {
      padding: 0px !important;
  4. Don't forget to save your settings and check the advertisements on your cellphone again. Yes, Page Level Ads only appear on the mobile version of the blog.

Why did it happen? This is because there is CSS that is added automatically by Google when the AdSense script is run. The goal is good, so that the header is not covered by the ad with the side effect of the position of the blog layout going down a little. Auto-added CSS is a property paddingfor selectors body. Therefore we need !importantthat padding spacing is not affected by the CSS code that Google added.

Blog Header Solution Remains on Top If There are Page Level Ads
If successful, the header will stay above and close the Page Level Ads

Tired of reading from the start, it turns out that the trick is just that trivial. Yes, it turns out that the solution to the problem does not always have to be lengthy and complicated. If there is something simple why should it be complicated?


I think this method should be applied to templates with navigation menus that are on the side and appear slides when clicking the button. With a note that the position is fixed using CSS position:fixed(like my template). Because if it is not applied, it will appear like this image. The header is down, uh, but how come the menu stays on top. The open / close menu button is closed.

Page Level Ads Closed Navigation Menu

The exception is if the menu has a relative or static position, I think you don't need to use this method. But back to each template because the CSS code must be different. Adjust to your needs only. There are also those who use position: fixed but don't need to use this.


As mentioned in the previous paragraph, the header position will remain above and closed the Page Level Ads. Maybe for visitors it looks strange, some even think the header and menu are missing (personal experience). Even though it's just a cover up.

This method of preventing the navigation header from sliding down due to Page Level Ads is safe to apply because it only slightly modifies the CSS. Do you want to apply it or not? It all depends on taste.

Post a Comment