Argthtjtr

P.S: I'm using React for front-end and SASS for CSS that's why it's 'className' instead of 'class' and there are no brackets in my CSS.

It's not much to explain, basically whenever I try to for example show the burger menu on the table view, it never appears and stays display: none.

.logo__area-mobile

    display: none





@media only screen and (max-width: 768px)

    .logo__area-mobile

        display: block

HTML:

<header>

  <div className="header-search">

    <div className="logo__area-mobile">

      <button>☰</button>

    </div>

    <div className="header-search-input">

      <i className="fas fa-search"></i>

      <input type="text" placeholder="Est: Daredevil, Orange is the new black" />

    </div>

  </div>

  <div className="header-menu">

    <div className="menu">

        <ul>

            <li><NavLink to="/recently" activeClassName="is-active">مضاف مؤخراً</NavLink></li>

            <li><NavLink to="/series" activeClassName="is-active">المسلسلات</NavLink></li>

            <li><NavLink to="/movies" activeClassName="is-active">الافلام</NavLink></li>

            <li><NavLink to="/" activeClassName="is-active" exact>الرئيسية</NavLink></li>

        </ul>

    </div>

    <div className="logo">

        <Link to="/">EgyMovs</Link>

    </div>

  </div>

</header>

Use more specific selector for your element.
Like 2 classes or tag name and class name.

Hint for count:

.a .b //00020

#id .a //00110 -- more specific, higher priority