1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Adsense Header Ad Overlaps Navbar

Discussion in 'Styling and Customization Questions' started by feldon30, Jun 13, 2013.

  1. feldon30

    feldon30 Well-Known Member

    I've tried all the advice here:
    and here:
    and here:

    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.
    Last edited: Jun 13, 2013
  2. Brogan

    Brogan XenForo Moderator Staff Member

    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
    Ensure the logo block height is sufficiently high.
    Hugilore111 and HenrikHansen like this.
  3. feldon30

    feldon30 Well-Known Member

    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 type="text/javascript"
    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.
  4. Brogan

    Brogan XenForo Moderator Staff Member

    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.
  5. feldon30

    feldon30 Well-Known Member

    PM sent.
  6. Brogan

    Brogan XenForo Moderator Staff Member

    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.
    Last edited: Jun 13, 2013
    localhost8080 and Walter like this.
  7. feldon30

    feldon30 Well-Known Member

    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.
    Bram likes this.

Share This Page