XF 1.4 ad_header Styling Issues in Responsive Mode

Neutral Singh

Well-known member
Hi @Jake Bunce

Facing an annoying little issue...


When i add the following html in ad_header template, these two white arrows from the breadcrumb show up awkwardly only in responsive mode... in desktop view all looks fine... i remove the html and these do not show-up. i can see these arrows in my mobile device as well... no idea how to get rid of this thingy. o_O

Any suggestion?

Thank you so much!

<xen:hook name="ad_header" />
    <div style="float: right;">
    <a target="_blank" href="http://khalsaaid.org/"><img width="190" height="61" src="/images/adverts/khalsa-aid.jpg"></a>
    <a target="_blank" href="http://www.gursoch.com/ "><img width="190" height="61" src="/images/adverts/gursoch.gif"></a>

Screen Shot 2015-01-24 at 12.05.50 AM.png Screen Shot 2015-01-24 at 12.06.21 AM.png

Jake Bunce

XenForo moderator
Staff member
That is very likely related to your header height:

Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Height of Header Logo

The header height is usually fixed and expected to stay the same.

In your case the fix is probably to increase your header height to accommodate those images (at least 61px, maybe more). Just keep increasing the height until the problem goes away.


Well-known member
You need to add a media query to offset for the ad banner:

@media (max-width:@maxResponsiveMediumWidth)
.Responsive #headerMover #headerProxy { height: 359px; }
Ads disabled on the page it shows fine(without the query)

Neutral Singh

Well-known member
@Jake Bunce @Russ

Sorry for being PIA but this did not do anything! I am a complete novice at this... After adding the code in extra.css what else am i supposed to do, is there anyway to hide these banner after a certain browser length, thanks
Last edited:

Neutral Singh

Well-known member
Woohoo! Finally, the following code seems to working fine for me... (y)

<xen:hook name="ad_header" />
   <table class="hiddenResponsiveWide hiddenResponsiveMedium hiddenResponsiveNarrow" align="left" valign="bottom" nowrap="nowrap" style="max-width:375px; float: right;">
   <td nowrap>
   <span><a target="_blank" href="http://www.org/"><img style='max-width:185px;' height="61" src="/images/adverts/"></a></span>
   <span><a target="_blank" href="http://www.com/ "><img style='max-width:185px;' height="61" src="/images/adverts/></a></span>