I am learning reactjs and encountered a problem while displaying the properties in media queries. What I am trying to do is to display the hamburger I built using CSS.

• For width > 799px : It should NOT be displayed i.e. display:none
• For width <= 799px : It should be displayed i.e. display:block

Attached CSS files

When width>799px;

/* hamburger menu */
.header .headerContainer_hamburgerMenu {
 display: none;
 background-color: var(--font-color);
 height: 2px;
 width: 1.2rem;
 cursor: pointer;
 margin-right: 1rem;
 } 

.header .headerContainer_hamburgerMenu::before, .header .headerContainer_hamburgerMenu::after {
  content: "";
  background-color: var(--font-color);
  height: 2px;
  width: 1.2rem;
  cursor: pointer;
  display: block;
 }
 .header .headerContainer_hamburgerMenu::before {
    transform: translateY(-7px);
  }
 .header .headerContainer_hamburgerMenu::after {
    transform: translateY(5px);
  }

• when width<799px:

   @media only screen and (max-width:799px) {
  
   .header .headerContainer_hamburgerMenu {
       display: block;
      }  
   }
  

On inspecting element, I got this

I am also attaching the picture of the hamburger

I also intentionally displayed the hamburger for the desktop view to show you where I want this in the navbar in the given pic