
.myheader {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 100px;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  box-sizing: border-box;
}

.myheader nav {
  float: right;
}
.myheader nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}
.myheader nav ul li {
  list-style: none;
}
.myheader nav ul li a {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #FFF;
  text-decoration: none;
  display: block;
}
.myheader nav ul li a:hover,
.myheader nav ul li a.active {
  color: #FFF;
  background: #2196F3;
}
.menu-toggle {
  color: #FFF;
  float: right;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none;
}
@media (max-width: 991px) {
  .myheader {
    padding: 0 20px;
  }
  .menu-toggle {
    display: block;
  }
  .myheader nav {
    position: absolute;
    width: 50%;
    height: calc(100vh - 50px);
    background: rgba(0, 0, 0, 0.6);
    top: 0px; padding-top: 70px;
    left: -100%;
    transition: 0.5s;
  }
    
    .navbar-collapse {
    position: fixed; 
    width: 50% !important;
    height: calc(100vh - 50px) !important;
    background: rgba(0, 0, 0, 0.8);
    top: 0px; padding-top: 70px !important;
    left: -100%;
    transition: 0.5s ease;
               
    }
    
    
    .navbar-nav {padding-top: 100px !important;}
    
    .navbar-inverse .navbar-nav > li > a:hover {background-color: transparent !important;}
    .navbar-inverse .navbar-nav > li > a {background-color: transparent !important;}
    
    
    .collapse.in {
        left: 0;
    }
    
    


    
  .myheader nav.active {
    left: 0;
  }
  .myheader nav ul {
    display: block;
    text-align: center;
  }
  .myheader nav ul li a {
    border-bottom: 1px solid rgba(0,0,0,0.2);
  }

    

} 
    
    
       @media only screen and (max-width : 620px) {
    .navbar-collapse {
    position: fixed; 
    width: 60% !important;
    height: calc(100vh - 50px) !important;
    background: rgba(0, 0, 0, 0.8);
    top: 0px; padding-top: 70px !important;
    left: -100%;
    transition: 0.5s ease;
               
    }
 
}
    