Upon loading my page, I noticed that the bar at the top covers the header. However, by clicking the hide bar arrow, the header becomes visible. When I click the reappear arrow, the margin adjusts automatically to place the header underneath the bar.
I'm puzzled as to why the bar doesn't create a margin when the page loads. Do you have any ideas on how to fix this? Here is the javascript and code I'm currently using. The website in question is
Any assistance on this matter would be greatly appreciated!
<script type="text/javascript">
var stub_showing = false;
function woahbar_show() {
if(stub_showing) {
$('.woahbar-stub').slideUp('fast', function() {
$('.woahbar').show('bounce', { times:3, distance:15 }, 100);
$('body').animate({"marginTop": "2.4em"}, 250);
});
}
else {
$('.woahbar').show('bounce', { times:3, distance:15 }, 100);
$('body').animate({"marginTop": "2.4em"}, 250);
}
}
function woahbar_hide() {
$('.woahbar').slideUp('fast', function() {
$('.woahbar-stub').show('bounce', { times:3, distance:15 }, 100);
stub_showing = true;
});
if( $(window).width() > 1024 ) {
$('body').animate({"marginTop": "0px"}, 250); // if width greater than 1024 pull up the body
}
}
$().ready(function() {
window.setTimeout(function() {
woahbar_show();
}, 5000);
});
</script>
<div class="woahbar">
<span>
Brighton Orient treats you to up to 25% off in honour of Mother's day! Ends midnight this Sunday, 18 March!! <a class="woahbar-link" href="http://www.brightonorient.com/events.html">Click here for details</a>
</span>
<a class="close-notify" onclick="woahbar_hide();"><img class="woahbar-up-arrow" src="woahbar-up-arrow.png"></a>
</div>
<div class="woahbar-stub" style="display:none">
<a class="show-notify" onclick="woahbar_show();"><img class="woahbar-down-arrow" src="woahbar-down-arrow.png"></a>
</div>