XF 1.2 ad_header and the site logo


Active member
I'm having difficulty getting my site logo and my ad_header (with adsense code) to co-exist happily together. I'm employing the asynchronous adsense update as prescribed in Brogan's Responsive AdSense resource, and that is working as expected - I get the correct sized ad based on the browser width upon a reload.

However, due to my fixed width of the logo I find that if I resize the browser and reduce the width such that the ad and logo collide, the logo will jump beneath the ad and an ugly overlaps with the main content ensues.




The breadcrumb/nav bar is hidden, but you can see the right-facing arrows just floating in place.

Is there a way to prevent the overlapping? I wouldn't mind if the content below just got shoved down accordingly, but just wondering if there's a more elegant solution, or "preferred practice" to having a logo alongside an Ad in the header space when using a responsive design?


XenForo moderator
Staff member
Unfortunately there is not much you can do about this.
A page refresh will fix it as a smaller ad will be served, but this doesn't happen dynamically.

Anything which increases the header space compared to what is set in SPs will have a detrimental effect on the style, especially the breadcrumbs and nav bar.

I don't have an ad in the header for this reason.


Active member
Thanks for that, but I already decided that there simply wasn't enough space in my header for both the logo and Ad. Can I at least see a demo of your solution? It appears as though you have the logo sitting on top of the Ad? If so, that wouldn't be ideal for me, as it would take up too much vertical space.


Active member
Yeah, it appears that way, but when you reduce the browser width the Ad eventually appears under the logo, and behind the menu. This is not ideal for me.
Everything breaks when you choose a small window so the ad is not a problem. its the way sites are designed. Content gets hidden when the window is not enough to display it.


Active member
But isn't that the whole point behind a Responsive design? So that things don't break when they get smaller? :) Sorry if that's wasn't clear in my original post, but I was trying to have everything working together in a responsive design.