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

XF 1.4 Header Banner pushes logo and menu over content

Discussion in 'Troubleshooting and Problems' started by gunnar, Jun 16, 2015.

  1. gunnar

    gunnar Active Member

    I have a inserted a google DFP code into the header and this causes the menus and logo to push down, hiding the top of the content. How can I fix this? I tried different options on the template settings, but could not find a solution.
    http://ff-society.com/index.php

    Pm if you need a demo login.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You will likely need to float the ad or adjust the header height accordingly, depending on how you want the layout.
     
  3. gunnar

    gunnar Active Member

    What would the difference be on those two options?
     
  4. gunnar

    gunnar Active Member

    Or where can I find more information on how to do this? the height of the banner is 250px high and 1050 wide is there a setting I can create this space for the banner?
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    If your banner is 1050 px wide then it is always going to push the logo down.

    You will therefore need to increase the header height in style properties.
     
  6. gunnar

    gunnar Active Member

    Thank you, I could not find this setting in the admin panel? The only settings I could find where for all the other elements such as menu bars, logo etc.
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

  8. gunnar

    gunnar Active Member


    I tried changing the values in that setting, but it did not change anything.
     
  9. gunnar

    gunnar Active Member

    Any help would be greatly appreciated..
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    I don't see any issues with your header/logo currently.
     
  11. gunnar

    gunnar Active Member

    I took the banner down whilst trying to resolve the issues.
    I have put it back so you can see:
    http://ff-society.com/index.php
     
  12. gunnar

    gunnar Active Member

    Sorry to say nothing changes was incorrect, the space above logo is larger if I change the values. However the issue with logo and menu pushing over the content remains the same:
     

    Attached Files:

  13. Mike

    Mike XenForo Developer Staff Member

    If you're putting something with variable or dynamic height in the header, you'll likely need to change the structure of the page. The default system uses an approach that requires the header to have a known height (though it speeds up content loading).
     
  14. gunnar

    gunnar Active Member

    Thanks,
    It's a banner loaded from Googles DFP system, it will mostly be internal content promotion.
    I think it should always be 250px high. Is there any way of setting this space? css in extra.css?
     
  15. Mike

    Mike XenForo Developer Staff Member

    Look in public.css for the header mover / header proxy height calculation. You can add additional spacing to that.
     
  16. gunnar

    gunnar Active Member

    Thank you,
    I tried to change a few things in this and also header.css but can't seem to have any luck.. It increases empty space in header but still overlaps..
    There must be a way to add this space in css, no?
     
  17. gunnar

    gunnar Active Member

    I found that if I increase "header proxy" in chrome inspect element function it seems to work. How could I add this as a css correction?
    <div id="headerProxy" style="
    height: 382px;
    </div>

    (I have absolutely no idea what I'm doing here.. but it seems to work..)
     
  18. gunnar

    gunnar Active Member

    Two hours of googling and guesswork and I think I found the solution!
    This seems to have done the job, not sure if all code is needed but it works..

    If anyone that knows what they are doing with code can confirm that this will not break anything that would be appreciated! :)

    (382px is the just added 250px to the default setting.)

    #headerMover #headerProxy
    {
    background-color: rgb(0, 0, 0);
    height: 382px; /* +2 borders */
    }

    #headerMover #header
    {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    }
     
  19. Mike

    Mike XenForo Developer Staff Member

    I think you've mainly changed the height part -- though I do also see a hardcoded background, which is probably ok for your site. It that height works for you, then that should be fine. (Though bear in mind that it's a static height, so if the height of the embedded bit changes, it could create some oddities.)
     
  20. gunnar

    gunnar Active Member

    Great, thank you! Sounds like I'm ok as the hight was the problem and the banners are always the same static hight! :)
     

Share This Page