title: Get the site to scale down when top banner expands
body: <p>I got a banner at the top of my website that contains some contact information. When a user clicks on the bar, the bar expands and shows it's contents. But the expanded div is displayed over the website, is it possible for the site to scale with the div? So that the top of the site begins under the expanded div.</p>
  
  <p>I tried by giving the div I use position: relative, but this didn't do anything.</p>
  
  <p>My code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="bannertop"&gt;
      &lt;div id="cont"&gt;
          &lt;a href="#" id="buttonphone"&gt;&lt;i class="fa fa-chevron-down telefoontje" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class="bannertopcontact"&gt;
              &lt;li class="banneritem"&gt;
                  &lt;a style="color:#fff;" href="tel:+2523532523532"&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt;352353252&lt;/a&gt;
              &lt;/li&gt;
               &lt;li class="banneritem"&gt;
                  &lt;a style="color:#fff;" href="mailto:info@website.nl"&gt;&lt;i class="fa fa-envelope" aria-hidden="true"&gt;&lt;/i&gt; info@website.nl&lt;/a&gt;
              &lt;/li&gt;
               &lt;li class="banneritem"&gt;
                  &lt;a style="color:#fff;" href="contact.php"&gt;&lt;i class="fa fa-external-link" aria-hidden="true"&gt;&lt;/i&gt; Contactpagina&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>&lt;script&gt;
      $(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");
             }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And finally some CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>