Is there a css way to hide an element after a line break caused by a window resize? I want a similar behavior of my nav bar like amazon. If you decrease the window size, the nav elements which have a lack of space collapse to a new line, but the elements are collapsing to a background layer so they dont have an impact on the layout anymore and become invisible.

The solution with display:none on specific screen sizes is not the way I want to handle the problem. white-space:nowrap and overflow:hidden also dont solve it correctly, because this method works only letter for letter on links, and not element by element (i.e. div).

As far as I read the amazon code correctly, they solved it with javascript. Im very interested in a "only css way". Has anyone a clue?

My css code is very simple for the nav + elements:

.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;
  }

If I add white-space:nowrap and overflow:hidden to .site-nav I get a similar effect, but not the same. By decreasing the window size the letters of the link disappear one by one. But I want the whole <li> element to disappear at once.

BTW: The code is in a liquid file:

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

#########

Update 2: Using only white-space:nowrap without overflow:hidden in the parent div seems to be a good temporary solution since it switches directly to the next smaller media query appearance.