jquery - Some issues styling a mobile slide left menu -

im doing responsive slide left menu has layout issues. want when mobile menu icon clicked mobile menu appear right below yellow div, im using margin-top:70px in other browsers approach menu dont appears right below yelow div.

then when mobile icon clicked want change icon font class "fa-fa-bars" "fa-fa-close". not working.

and "item mobile link" dont appears aligned centered other header elements, bit above.

example:https://jsfiddle.net/4ggsmqje/1/

for example in example:https://jsfiddle.net/4ggsmqje/4/ layout appears want " margin-top:80px;" on .mobile__nav div , "margin-top: 15px;" on "item mobile" link. approach appears different in other browsers, mobile slide left menu dont appears right below yellow div bit above or below.

html:

<div class="header" style="background:yellow;">     <div class="container">         <div class="row align-items-center justify-content-between">           <div class="col-4 col-sm-4 d-md-none  d-lg-none d-xl-none">             <div class="header__mobile__menu">               <a id="mobile" href=""><i class="fa fa-bars" aria-hidden="true"></i></a>             </div>           </div>           <div class="col-4 col-sm-4 d-md-none d-lg-none d-xl-none">             <div class="header__logo">               <a href="">logo</a>             </div>           </div>           <div class="col-4 col-4 co-sm-4 d-md-none d-lg-none d-xl-none">             <ul>               <li><a href>item mobile</a></li>             </ul>           </div>             <div class="d-none d-md-block d-lg-block d-xl-block col-md-4">                 <div class="header__logo">                     <a href="">logo</a>                 </div>             </div>             <ul class="mobile__nav">                 <li><a  href="">item 1</a></li>                 <li><a  href="">item 2</a></li>                 <li><a  href="">item 3</a></li>                 <li><a  href="">item 4</a></li>                 <li><a  href="">item 5 <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>             </ul>             <div class="col-8 col-sm-8 d-none d-md-block">                 <ul class="header__nav">                   <li><a  href="">item 1</a></li>                   <li><a  href="">item 2</a></li>                   <li><a  href="">item 3</a></li>                   <li><a  href="">item 4</a></li>                 </ul>             </div>         </div>     </div> 

css:

.header{   padding: 15px 0;   border-bottom: 1px solid orange; }  .mobile__nav{   margin-top:70px;    position: fixed;   left: 0;   top: 0;   width: 76%;   height: 100%;   min-width: 200px;   max-width: 340px;   background-color: gray;   z-index: 1000;   overflow: hidden;   overflow-y: auto;    li{     display: block;     width: 100%;     padding:  20px;   }    li a{     color: orange;    } }  .header__logo{   h1{     color: orange;   } }  .header__mobile__menu{   cursor: pointer;   float: left;   a{     color: orange;   } } 

jquery:

$('#mobile').click(function() {     $("i", this).toggleclass("fa-fa-bars fa-fa-close"); }); 

the "item mobile" text not aligned vertically because wrapped inside ul element , ul element has margin screws alignment up. can (or best practices suggest, should) use css reset project. if don't want (for reason) write rule removes ul margin i.e. ul{ margin:0; }

also position of "mobile__nav" element shouldn't use margin (although can) position because fixed position element instead must align element using top property.

some browsers act unexpectedly on different rules (like margin) should try stick best practices. that's reason why should use css reset, make preset default values of browsers same.

please take @ this example.