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.
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!
- 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
. - Add the following code in it without deleting the existing code:
If there is already a propertypadding:0px !important;
padding
, just change its value to0px !important
. - The result is something like this:
body { ... ... padding: 0px !important; ... ... }
- 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 padding
for selectors body
. Therefore we need !important
that padding spacing is not affected by the CSS code that Google added.
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?
PRO
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.
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.
COUNTER
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.