0

Im trying to make navbar responsive, but it does not stick to the top when I scroll down as you can see the picture below, it just stays at the top and disappears as i scroll down just like a normal div (I scrolled a little bit from the top)
what am I missing ?

my GitHub repo

EDIT: there is no problem with desktop version

my HTML of navbar

<div
    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>
  </div>

here is my CSS 

@media only screen and (min-device-width: 320px) and (max-device-width: 767px) {
.navbar {
position: fixed;
z-index: 199;
top: 0;
}
.navbar .navbar-wrapper {
width: 100%;
}
.navbar .navbar-wrapper .left {
border: 1px solid white;
width: 25%;
}
.navbar .navbar-wrapper .left #name {
font-size: 24px;
}

enter image description here

wasilikoslow
  • 1,411
  • 1
  • 9
  • 13

1 Answers1

0

You are using max-device-width and the device you are looking at has a max-device-width which is higher than 767px, the upper limit in the @media query.

You can read about the difference here:
What is the difference between max-device-width and max-width for mobile web?

Timothy Alexis Vass
  • 2,526
  • 2
  • 11
  • 30
  • I didnt quite catch the solution, i made them into `max-width` but im facing with the same problem – wasilikoslow Jan 28 '21 at 11:51
  • There are multiple things to change with your code. Why do you have a ```
    ``` and ```
    ``` instead of ```
     – Timothy Alexis Vass Jan 28 '21 at 11:52
  • i forgot to mention, i am using React and i just came with `create-react-app` – wasilikoslow Jan 28 '21 at 11:53
  • Is all this in the same component? Navbar or Header should be it's own component, it should be a ``` – Timothy Alexis Vass Jan 28 '21 at 11:57
  • I think we should focus on the question rather than making such a "suggestions". anyway thank you for your answers – wasilikoslow Jan 28 '21 at 12:33