On my website, there is a top banner containing contact information that expands when clicked. However, the expanded div overlaps the site content. Is there a way to make the site scale with the expanded div so that the top of the site starts below it?
I tried using position: relative on the div, but it didn't work as expected.
Here is the code I am using:
HTML:
<div class="bannertop">
<div id="cont">
<a href="#" id="buttonphone"><i class="fa fa-chevron-down telefoontje" aria-hidden="true"></i></a>
<ul class="bannertopcontact">
<li class="banneritem">
<a style="color:#fff;" href="tel:+2523532523532"><i class="fa fa-phone" aria-hidden="true"></i>352353252</a>
</li>
<li class="banneritem">
<a style="color:#fff;" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="731a1d151c33041611001a07165d1d1f">[email protected]</a>"><i class="fa fa-envelope" aria-hidden="true"></i> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f262129200f382a2d3c263b2a612123">[email protected]</a></a>
</li>
<li class="banneritem">
<a style="color:#fff;" href="contact.php"><i class="fa fa-external-link" aria-hidden="true"></i> Contact Page</a>
</li>
</ul>
</div>
</div>
Jquery:
<script>
$(document).ready(function()
{
$.fn.animateRotate = function(angle, duration, easing, complete) {
var args = $.speed(duration, easing, complete);
var step = args.step;
return this.each(function(i, e) {
args.step = function(now) {
$.style(e, 'transform', 'rotate(' + now + 'deg)');
if (step) return step.apply(this, arguments);
};
$({deg: 0}).animate({deg: angle}, args);
});
};
$("#buttonphone").click(function(){
if (!$(this).hasClass("expanded")){
$("#cont").animate({height: '160px',},340);
$('.telefoontje').animate({ marginTop: "140px" }, 300)
$(".telefoontje").animateRotate(180, 400, "linear", function(){
});
$(this).addClass("expanded");
}
else {
$("#cont").animate({height: '35px',},300);
$('.telefoontje').animate({ marginTop: "10px" }, 300)
$(".telefoontje").animateRotate(-180, 400, "linear", function(){
});
$(this).removeClass("expanded");
}
});
});
</script>
And some CSS:
.bannertop{
font-size: 15px;
height:40px;
text-align:center;
display: none;
position:relative;
z-index:999999999999999999!important;
}
.telefoontje{
color: #fff;
display:inline-block;
margin-top:10px;
position:absolute;
font-size: 16px!important;
z-index:999999999999999999;
}
.bannertopcontact{
list-style: none;
color: #fff;
margin-top:30px;
z-index:999999999999999999!important;
}
.banneritem{
margin-top:13px;
}
#cont{
background-color:#85BD3E;
height: 35px;
overflow:hidden;
z-index:999999999999999999!important;
position:relative;
}