How to add banner code below the logo

pwadm

Member
I would like to add 728x90 banner below the logo. I tried adding <div> elements into the ad_header template, but the layout just doesn't work. The banner is rendered on top of the Menu, it looks like it can't reserve space under the logo. I tried specifying width, adding display: block; but couldn't get it to work.
 
This is my current code:

Code:
<div id="logoBlock">
    <div class="pageWidth">
        <div class="pageContent">
            <xen:include template="ad_header" />
            <xen:hook name="header_logo">
            <div id="logo"><a href="{$logoLink}">
                <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
                <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
            </a></div>
            </xen:hook>
 
<div style="display: block; height: 90px">
test
</div>
            <span class="helper"></span>
        </div>
    </div>
</div>

If I replace 'test' with an actual banner code it gets positioned below the logo, but only half of the banner shows up. The other half ends up behind the menu area.
 
This had an opposite effect. It gave more room to the logo, and pushed the banner even more below the Menu area.

The height in properties increases the size of the <div id="logo">, I want to position my banner below the logo area.

Am I trying to do something non standard? How does one add a banner to the header? There is not enough room next to the logo, when you display on tablets, hence my idea to show it below.
 
This is how it looks like:

ad_pos_problem.png
 
Top Bottom