Bootstrap collapsed menu not pushing content down when expanded

Question

I am using Twitter Bootstrap to play around with the responsive side of a website. I am having a problem however with the smaller widths where the collapsed menu is going ov

Answer 1

I had the same problem, looked at the answers but I got confused as they weren't working for me. So I thought of animating the container so that it goes down and up. I am simply changing the margin-top property of the container when the collapsing button is pressed. Here's my code snippet:

const profileBtn=document.querySelector('#profile-btn');
const arrow=document.querySelector('#arrow');
const menu = document.querySelector(".home-menu");
function changeArrow() {
    if (arrow.className === 'fas fa-angle-double-down') {
        arrow.className = 'fas fa-angle-double-up';
        moveDown();
    }
    else{
        arrow.className = 'fas fa-angle-double-down';
        moveUp();
    }
};

profileBtn.addEventListener('click',changeArrow);

function moveDown() {
  var pos = 80;
  var id = setInterval(frame1, 1);
  function frame1() {
    if (pos === 188) {
      clearInterval(id);
    } else {
      pos+=2;
      menu.style.marginTop = pos + 'px';
    }
  }
};

function moveUp() {
  var pos = 188;
  var id = setInterval(frame2, 1);
  function frame2() {
    if (pos === 80) {
      clearInterval(id);
    } else {
      pos-=2;
      menu.style.marginTop = pos + 'px';
    }
  }
};

.home-menu{
    height:auto;
    width: 70%;
    background: #E3AFBC;
    box-shadow: 2px 2px 20px #9A1750;
    border-radius: 10px;
    color: white;
    margin-top: 80px;
}

    
    
    
    

    
    

    
    



  

    

      
Collapsed content
      Toggleable via the navbar brand.
    
  
  

    
      
    
  



  

  
  
    About the Family
  

  
    Family Calendar
  

  
    Send Email to everyone
  

  
    Contacts