XF 1.4 Header Banner pushes logo and menu over content

[gunnar]

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.

 

[Paul B]

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

 

[gunnar]

What would the difference be on those two options?

 

[gunnar]

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?

 

[Paul B]

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]

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.

 

[Paul B]

 

[gunnar]

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

 

[gunnar]

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

Any help would be greatly appreciated..

 

[Paul B]

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

 

[gunnar]

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

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

 

[gunnar]

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

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:

 

[Mike]

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]

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]

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

 

[gunnar]

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]

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]

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]

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]

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!