¿Hay alguna forma css de ocultar un elemento después de un salto de línea causado por un cambio de tamaño de ventana? Quiero un comportamiento similar de mi barra de navegación como amazon. Si reduce el tamaño de la ventana, los elementos de navegación que carecen de espacio se colapsan en una nueva línea, pero los elementos se colapsan en una capa de fondo para que ya no tengan un impacto en el diseño y se vuelvan invisibles.

La solución con display:none en tamaños de pantalla específicos no es la forma en que quiero manejar el problema. white-space:nowrap y overflow:hidden tampoco lo resuelven correctamente, porque este método funciona solo letra por letra en los enlaces, y no elemento por elemento (es decir, div).

Por lo que leí correctamente el código de amazon, lo resolvieron con javascript. Estoy muy interesado en una "única forma CSS". ¿Alguien tiene una pista?

Mi código css es muy simple para los elementos nav +:

 .site-nav { position: relative; padding: 0; text-align: left; margin: 0 0 25px 0; a { padding: 3px 10px; } a:hover { padding: 3px 10px; background-color: #e6f2ff; color: #000000; } li { display: inline-block; }

Si agrego white-space:nowrap y overflow:hidden a .site-nav obtengo un efecto similar, pero no el mismo. Al disminuir el tamaño de la ventana, las letras del enlace desaparecen una a una. Pero quiero que todo el elemento <li> desaparezca de una vez.

Por cierto: el código está en un archivo líquido:

 <div class="grid grid--no-gutters grid--table"> {% if section.settings.align_logo == 'left' %} <nav class="grid__item small--hide" id="AccessibleNav" role="navigation"> {% include 'site-nav' %} </nav> {% endif %} </div>

#########

Actualización 2: usar solo white-space:nowrap sin overflow:hidden en el div principal parece ser una buena solución temporal, ya que cambia directamente a la siguiente apariencia de consulta de medios más pequeña.