title: collapsible navigation menu withconstant live links problem
body: <p>I have an annoying situation with a navigation bar ive recently installed.</p>
  
  <p>The navigation links are always live even when the sites navigation menu is collapsed, which in turn is blocking other hyperlinks throughout the site.</p>
  
  <p>What im stuck with is what do i add to navigations css to stop these invisible links from always being active and ruining the rest of my site. From research and playing about with the code i think its a form of display:none,  display:only-on-hover of even adding the data-toggle function, but how i do that right now is beyond me!</p>
  
  <p>I've included the part of the navigations code i think is the problem and any assistance would be appreciated.</p>
  
  <pre><code>.navigation__nav {
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1500;
      opacity: 0;
      width: 0;
      transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  
    .navigation__list {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      list-style: none;
      text-align: center;
      width: 100%;
      display: ???; }
  
    .navigation__item {
      margin: 1rem;
      display: ???; }
  
  
  &lt;div class="container-fluid"&gt;
  &lt;div class="navigation"&gt;
              &lt;input type="checkbox" class="navigation__checkbox" id="navi-toggle"&gt;
  
              &lt;label for="navi-toggle" class="navigation__button"&gt;
                  &lt;span class="navigation__icon"&gt;&amp;nbsp;&lt;/span&gt;
              &lt;/label&gt;
  
              &lt;div class="navigation__background"&gt;&amp;nbsp;&lt;/div&gt;
  
              &lt;nav class="navigation__nav"&gt;
                  &lt;ul class="navigation__list"&gt;
                      &lt;li class="navigation__item"&gt;&lt;a href="../home/index.html" class="navigation__link"&gt;&lt;span&gt;01&lt;/span&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="navigation__item"&gt;&lt;a href="../yoursetup/index.html" class="navigation__link"&gt;&lt;span&gt;02&lt;/span&gt;Whats Your Setup?&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="navigation__item"&gt;&lt;a href="../yourmixes/index.html" class="navigation__link"&gt;&lt;span&gt;03&lt;/span&gt;Your Mixes&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="navigation__item"&gt;&lt;a href="../tunes/index.html" class="navigation__link"&gt;&lt;span&gt;04&lt;/span&gt;Tunes&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="navigation__item"&gt;&lt;a href="../media/index.html" class="navigation__link"&gt;&lt;span&gt;05&lt;/span&gt;Media&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="navigation__item"&gt;&lt;a href="../links/index.html" class="navigation__link"&gt;&lt;span&gt;06&lt;/span&gt;Links&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="navigation__item"&gt;&lt;a href="../contact/index.html" class="navigation__link"&gt;&lt;span&gt;07&lt;/span&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  </code></pre>