html - Navbar behaves like position sticky

Question

im trying to make navbar stick to the top on the mobile version but it behaves like position: sticky even though i make it fixed , it works fine on Firefox, but does not work on Chrome. here is my HTML

btw, i am using react and here is my repo

<nav
    className='navbar'
    style={{ transition: 'ease-in-out 0.5s', backgroundColor: bgColor }}
  >
    <div className='navbar-wrapper'>
      <div className='left'>
        <img src={myLogo} alt='logo' />
        <span id='name'>Suat Bayrak</span>
      </div>
      <div className='right'>
        <i className='fas fa-bars' onClick={(e) => menuFunc(e)}></i>
        <ul className={showMenu ? 'active' : ''}>
          <li>
            <NavLink to='/' exact activeClassName='active'>
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to='/about' exact activeClassName='active'>
              About
            </NavLink>
          </li>
          <li>
            {' '}
            <NavLink to='/portfolio' exact activeClassName='active'>
              Porfolio
            </NavLink>
          </li>
          <li>
            <NavLink to='/contact' exact activeClassName='active'>
              Contact
            </NavLink>
          </li>
        </ul>
      </div>
    </div>
  </nav>

and here is my related CSS;

nav {
  position: fixed;
  -webkit-backface-visibility: hidden;
  margin: 0;
  top: 0px;
  left: 0px;
  z-index: 199;
  width: 100%;
  height: auto;
}
nav .navbar-wrapper {
  display: flex;
  width: 90%;
  height: 90px;
  margin: 0 auto;
  justify-content: space-around;
}
nav .navbar-wrapper .left {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
nav .navbar-wrapper .left img {
  width: 15%;
  height: auto;
}
nav .navbar-wrapper .left #name {
  font-size: 34px;
  color: #fff;
}
nav .navbar-wrapper .right i {
  display: none;
  color: #fff;
    }
nav .navbar-wrapper .right {
  width: 55%;
  height: 90px;
}
nav .navbar-wrapper .right ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 90px;
  list-style: none;
  width: 100%;
  transition: ease-in-out 0.5s;
}
nav .navbar-wrapper .right ul li a {
  text-decoration: none;
  font-size: 20px;
  color: #fff;
}    

and my media-query for it

@media (min-width: 320px) and (max-width: 767px) {
nav {
position: fixed;
top: 0px;
 }
}

question from:https://stackoverflow.com/questions/65941710/navbar-behaves-like-position-sticky

Answer 1

I dont really know what caused this situation on Chrome but I had a menu-bars icon, i displayed it as block, and everything is working just fine, didnt add a single line of code but that.