• 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

gunnar

Active member
#1
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.
 

Brogan

XenForo moderator
Staff member
#2
You will likely need to float the ad or adjust the header height accordingly, depending on how you want the layout.
 

gunnar

Active member
#4
You will likely need to float the ad or adjust the header height accordingly, depending on how you want the layout
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?
 

Brogan

XenForo moderator
Staff member
#5
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.
 

gunnar

Active member
#6
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.
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.
 

Mike

XenForo developer
Staff member
#13
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).
 

gunnar

Active member
#14
f 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).
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?
 

Mike

XenForo developer
Staff member
#15
Look in public.css for the header mover / header proxy height calculation. You can add additional spacing to that.
 

gunnar

Active member
#16
Look in public.css for the header mover / header proxy height calculation. You can add additional spacing to that.
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?
 

gunnar

Active member
#17
Look in public.css for the header mover / header proxy height calculation. You can add additional spacing to that.
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..)
 

gunnar

Active member
#18
Look in public.css for the header mover / header proxy height calculation. You can add additional spacing to that.
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;
}
 

Mike

XenForo developer
Staff member
#19
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.)
 

gunnar

Active member
#20
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.)
Great, thank you! Sounds like I'm ok as the hight was the problem and the banners are always the same static hight! :)