Estoy aprendiendo reactjs y encontré un problema al mostrar las propiedades en las consultas de medios. Lo que estoy tratando de hacer es mostrar la hamburger que construí usando CSS.

• Para ancho> 799px: NO debe mostrarse, es decir display:none
• Para ancho <= 799px: debe mostrarse, es decir display:block

Archivos CSS adjuntos

Cuando el ancho> 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); }

• cuando el ancho <799px:

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

Al inspeccionar el elemento, obtuve esto

También adjunto la foto de la hamburguesa.

También mostré intencionalmente la hamburguesa para la vista de escritorio para mostrarle dónde quiero esto en la barra de navegación en la imagen dada