How to display javascript banner in website header?

Question

I recently purchased a theme which includes the option to display a banner in the header. The banner can be displayed using either a static image or javascript. The particular javascript code I'm using is for an Amazon banner ad and is displayed on the frontend via an iframe.

Using a static image the banner displays correctly as you can see here: http://capethemes.com/demo/portal/review/

When using the javascript code, however, the banner is not visible. Upon inspecting the source code, I discovered that the script tags and html containing block are there but the iframe element is missing.

Anyway, I was able to ascertain that it is a styling issue but am not sure how to resolve it. The following default theme styles are being applied to the .headad element:

.headad {
float: right;
position: absolute;
top: 50%;
right: 0;
margin: -65px 0 0 0;
}

...and here's the snippet used to display the banner:

echo '<div class="clearfix"></div><div class="headad">';
echo htmlspecialchars_decode($themnific_redux['tmnf-headad-script']);
echo '</div>';

UPDATE #1

I've found I need to set a value for the width property on the .headad div to get the banner to display. Presumably this is because it's a responsive banner and therefore there has to be a width specified for the containing element so the appropriately sized banner image can be served.

Here's an overview of all the relevant details:

HTML markup of banner ad and containing div (I have only included the outer HTML)

<div class="headad">
<script type="text/javascript"></script>
<script></script>
<div ><iframe></iframe></div>
</div>

CSS for .headad element

.headad {
float: right;
position: absolute;
top: 50%;
right: 0;
margin: -65px 0 0 0;
}

This is the default theme CSS. I have changed float: right; to float: none; because position: absolute; is already being applied to the element. As I have already mentioned, to get the banner to display I have to set a value for the width property.

iframe CSS

iframe {
border: none;
display: inline-block;
width: 728px;
height: 90px;
}

UPDATE #2

I reproduced this on jsfiddle. You can view it here. Because this is a responsive banner, the width of the containing element has to be specified so the appropriately sized image can be returned. Maybe have to define a set of width property values using media queries for the .headad element?

Answer 1

It's there and visible in Incognito mode, it's being blocked by one of the adBlocker extension that you might be using in your browser.

The best workaround would be is to change the class from headad to something more generic like head-banner.

Make sure you update the style in your theme/plugin.

Banner with updated class:

Answer 2

Just digged into this problem with dev tools. Somehow it gets computed with display none ... i don't know exactly why this happens. Seems like there is some strange inline style that gets added async …

Try this:

#header.left-header .headad {
    display: block !important;
}

Answer 3

As already stated in my question, to display the banner ad a width has to be specified for the containing .headad element so the correctly sized image can be displayed. This is because the .headad element has position:absolute applied to it and so has no inherent width.

The only way to display the banner ad across the full range of browser/screen sizes is to use multiple CSS media queries. Even then, it is necessary to make a number of other styling adjustments to account for changes in the relative heights of the various elements.

Anyway, I've decided it's just not worth pursuing this any further. I will edit the style sheet so that the banner ad is only displayed when the browser/screen size is large enough to accommodate the full sized banner.

Thank you to everyone who helped out with this question.