title: Making my toggle Navbar be above other content
body: <p>I've built my own toggle navbar in my React-Project.
  when it's on, it doesn't block the content beneath it.
  so all the user can see is a mess.
  I've tried z-index in my CSS but sadly it didn't help..
  this is the css code, there is more but it's for the design so i didn't add it, its alot but if it is required i will add it.</p>
  <pre><code>@media screen and (max-width: 1028px){
      .navRight{
          flex-direction: column;
          height: auto;
      }
      .NavItem{
              width: 100%;
              border-top: 1px solid rgb(255, 255, 255);
              text-align: center;
              background-color: #6bbe92;
      }
      .toggleMenuBut{
          display: block;
      }
      p{
          text-align: center; 
          margin:auto;
          padding-top: 15px;
          padding-left: 15px;
      }
      .NavContainer{
          margin-bottom: 200px;
      }
      .inlineLogout{
          display: inline-block;
      }
      .isToggled{
          z-index: 1;
      }
  }
  </code></pre>
  <p>html:</p>
  <pre><code>&lt;div className=&quot;NavContainer&quot;&gt;
     {screenWidth&gt;1028 ? &lt;&gt;
     &lt;div className=&quot;navRight&quot;&gt;
        {user ? 
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/content'} className=&quot;linkP vertical-center&quot; style={{ textDecoration: 'none' }}&gt;
           &lt;p&gt;Videos&lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        :null}
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/recommendation'} className=&quot;linkP vertical-center&quot; style={{ textDecoration: 'none' }}&gt;
           &lt;p&gt;Recommendation&lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/about'} className=&quot;linkP vertical-center&quot; style={{ textDecoration: 'none' }}&gt;
           &lt;p&gt;About&lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/'} className=&quot;linkP vertical-center&quot; style={{ textDecoration: 'none' }}&gt;
           &lt;p&gt;Home&lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     {user ?  &lt;&gt;
     &lt;div className=&quot;navLeft&quot;&gt;
        &lt;div className=&quot;NavItem&quot; onClick={onLogout}&gt;
           &lt;Link to={'/'} className=&quot;linkP vertical-center&quot; &gt;
           &lt;p&gt;
              &lt;FontAwesomeIcon icon={faArrowRightFromBracket}/&gt;
              Log Out
           &lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className=&quot;NavItem&quot; &gt;
           &lt;Link to={'/acc'} className=&quot;linkP vertical-center&quot; &gt;
           &lt;p&gt;
              &lt;FontAwesomeIcon icon={faUser}/&gt;
              Profile
           &lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;/&gt; : &lt;&gt;
     &lt;div className=&quot;navLeft&quot;&gt;
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/login'} className=&quot;linkP vertical-center&quot;&gt;
           &lt;p&gt;
              &lt;FontAwesomeIcon icon={faArrowRightFromBracket} /&gt;
              Log In
           &lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/register'} className=&quot;linkP vertical-center&quot;&gt;
           &lt;p&gt;
              &lt;FontAwesomeIcon icon={faSquareArrowUpRight} /&gt;
              Register
           &lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;/&gt;}
     &lt;/&gt;: &lt;&gt;
     &lt;button onClick={toggleNav} className=&quot;toggleMenuBut&quot;&gt;
        &lt;FontAwesomeIcon icon={faBars} size={&quot;3x&quot;} /&gt;
     &lt;/button&gt;
     {toggleMenu ? 
     &lt;div className=&quot;isToggled&quot;&gt;
        {user ?
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/content'} className=&quot;linkP vertical-center&quot;  onClick={handleOnClick} style={{ textDecoration: 'none' }}&gt;
           &lt;p&gt;Videos&lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        :null}
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/recommendation'} className=&quot;linkP vertical-center&quot;  onClick={handleOnClick} style={{ textDecoration: 'none' }}&gt;
           &lt;p&gt;Recommendation&lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/about'} className=&quot;linkP vertical-center&quot;  onClick={handleOnClick} style={{ textDecoration: 'none' }}&gt;
           &lt;p&gt;About&lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/'} className=&quot;linkP vertical-center&quot;  onClick={handleOnClick} style={{ textDecoration: 'none' }}&gt;
           &lt;p&gt;Home&lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        {user ?  &lt;&gt;
        &lt;div className='NavItem' onClick={onLogout}&gt;
           &lt;p&gt;
              &lt;FontAwesomeIcon icon={faArrowRightFromBracket}/&gt;
              Log Out
           &lt;/p&gt;
        &lt;/div&gt;
        &lt;div className='NavItem'&gt;
           &lt;Link to={'/acc'} className=&quot;linkP vertical-center&quot; onClick={handleOnClick} style={{ textDecoration: 'none' }}&gt;
           &lt;p&gt;
              &lt;FontAwesomeIcon icon={faUser}/&gt;
              Profile
           &lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        &lt;/&gt; : &lt;&gt;
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/login'} className=&quot;linkP vertical-center&quot; onClick={handleOnClick}&gt;
           &lt;p&gt;
              &lt;FontAwesomeIcon icon={faArrowRightFromBracket}/&gt;
              Log In
           &lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        &lt;div className=&quot;NavItem&quot;&gt;
           &lt;Link to={'/register'} className=&quot;linkP vertical-center&quot; onClick={handleOnClick}&gt;
           &lt;p&gt;
              &lt;FontAwesomeIcon icon={faSquareArrowUpRight} /&gt;
              Register
           &lt;/p&gt;
           &lt;/Link&gt;
        &lt;/div&gt;
        &lt;/&gt;}
     &lt;/div&gt;
     : null}
     &lt;/&gt;}
  &lt;/div&gt;
  </code></pre>
  <p>adding also an image:</p>
  <p><a href="https://i.stack.imgur.com/rnYCp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rnYCp.png" alt="enter image description here" /></a></p>
  <p>recommendation's page:</p>
  <pre><code>&lt;div&gt;
          &lt;center&gt;
          &lt;h1 className=&quot;h1Rec&quot;&gt;Our recommendation&lt;/h1&gt;
          &lt;div className=&quot;pDiv&quot; id=&quot;one&quot;&gt;&lt;p class=&quot;pRec&quot;&gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;&lt;/div&gt;
          &lt;div className=&quot;carouselDiv&quot;&gt;
          &lt;Carousel width={'80%'} infiniteLoop={'true'} useKeyboardArrows={'true'} showThumbs={0} showStatus={0}&gt;
          {Images.map(renderCarouselItem)}
          &lt;/Carousel&gt;
          &lt;/div&gt;
          &lt;/center&gt;
      &lt;/div&gt;
  </code></pre>
  <p>in addition recommendation's CSS:</p>
  <pre><code>.RecComment{
      display: inline-block;
      height: 500px;
      vertical-align: middle;
  }
  
  .RecBut{
      background-color: #6bbe92;
      border: 0;
      border-radius: 10px;
      box-shadow: 5px;
      margin: auto 50px;
      text-align: center;
      color: #fff;
      font-weight: bold;
      font-size: 22px;
  
  }
  
  .recDiv{
      margin:225px 50px;
  }
  
  .h1Rec{
      margin-top: 100px;
      margin-bottom: 70px;
  }
  
  .pRec{
      line-height: 100%;
  }
  
  .pDiv{
      width: 80%;
      border-style: dotted;
      margin-bottom: 100px;
  }
  
  #one {
      border:solid 5px white;
      border-radius: 255px 50px 255px 50px/50px 225px 50px 255px;
      padding: 10px 50px;
    }
  
    .carsProp{
        width: 80%;
    }
    
    .carouselDiv{
      height: 600px;
  }
  @media screen and (max-width: 500px){
     .recDiv{
         height: 300px;
     }
     .h1Rec{
      margin-top: 50px;
      margin-bottom: 30px;
  }
  .carouselDiv{
      height: 300px;
  }
  }
  </code></pre>
  <p>Thanks!</p>