svg is affected by display: none; even though display:none is only under the nav selector

header {
    display: flex;
    justify-content: space-between;
}
nav {
    display: none;
}
header svg {
    width: 3em;
    margin-top: -6em;
    cursor: pointer;
}

<div>
        <header>
            <a href="#" class="logo">Shoe<span>Brand</span></a>

            <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Sneakers</a></li>
                <li><a href="#">Players</a></li>
            </ul>               
            </nav>
            <svg class="close" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 32H0V26.6667H24V32ZM48 18.6667H0V13.3333H48V18.6667ZM48 5.33333H24V0H48V5.33333Z" fill="white"/>
            </svg> 
        </header>

I tried specifically referencing the ul and li tags inside nav, but I still cant see the svg. What confuses me more is that cursor: pointer still works even though there's nothing there.

I want to hide nav without affecting svg.

Solution

Give the path a fill color and remove the negative top margin.

header {
  display: flex;
  justify-content: space-between;
}

nav {
  display: none;
}

header svg {
  width: 3em;
  cursor: pointer;
}

<header>
  <a href="#" class="logo">Shoe<span>Brand</span></a>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Sneakers</a></li>
      <li><a href="#">Players</a></li>
    </ul>
  </nav>
  <svg class="close" viewBox="0 0 48 32" xmlns="http://www.w3.org/2000/svg">
    <path d="M 24 32 H 0 V 26.6667 H 24 V 32 Z M 48 18.6667 H 0
    V 13.3333 H 48 V 18.6667 Z M 48 5.3333 H 24 V 0 H 48 V 5.3333 Z" fill="black" />
  </svg>
</header>