Adsense Header Ad Overlaps Navbar

[feldon30]

I've tried all the advice here:
http://xenforo.com/community/threads/adsense-banner-inside-logo_block.27413/
and here:
http://xenforo.com/community/threads/ad_header-adsense-alignment-issue.14341/
and here:
http://xenforo.com/community/threads/adding-advertisements-with-template-edits.6218/

No matter what I do, increasing and decreasing the logo_block height, wrapping the Google Adsense banner in a div with or without a fixed height, float or not float, making the logo_block div float or not float, specifying a height or not, my navbar goes crazy like what is pictured here.

It can't be this difficult to add a banner ad to a XenForo forum that I am chasing CSS ghosts for a hour. Maybe a better question is, why is logo_block such a complicated bit of CSS instead of a black box that we can put anything we want into?

I tried just removing the entire header template but after 10 minutes of trying every possible absolute positioning trick, I gave up.

Help appreciated as always.

 

[Paul B]

This works for me:

<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
Image or advert code
</div>

Ensure the logo block height is sufficiently high.

 

[feldon30]

XenForo version 1.1.5. All header templates are stock. logo_block is stock.

ad_header is set to:

<xen:hook name="ad_header" />
<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
<script type="text/javascript"><!--
google_ad_client = "*************";
/* ************** */
google_ad_slot = "****************";
google_ad_width = 970;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

Height of Header Logo style property is set to 153px. I get:



You can't see it in this image but the triangles from the navbar are being overlaid on the header logo.

I have tried increasing the Height of Header Logo to 243px and a number of variations up to 260px and it just increases the space more, without fixing the overlapping navigation problem. Again, I tried replacing the entire logo_block with two absolutely positioned DIVs with clear:both and everything I could think of, and that navigation just will not behave. Due to the content of the site, I prefer not to give out the URL.

 

[Paul B]

I would need to inspect the code to see what's happening.

Send me the URL in a conversation and I can take a look.

 

[feldon30]

PM sent.

 

[Paul B]

This is resolved.

For anyone stumbling on this thread at a later date, the solution was to put the following in EXTRA.css:

#headerMover #headerProxy {
height: 306px !important;
}

The 306px is the total height of the advertisement div (including top and bottom padding and margin) + the logo + the navigation bar
Which in this case was 100 + 153 + 53 = 306

This is specifically for the case when the advert is directly above the logo, not floated right.

 

[feldon30]

Just wanted to thank Brogan for diagnosing this in a number of PMs before he logged in and got it sorted for me.

And I will just say, adding stuff to the header in XenForo is *way* too finicky. It should be a blank slate, easy to add and remove stuff without the whole thing going batty. Just my 2 cents. Otherwise, very happy with XF.