Bonjour à tous,

Je viens vers vous car je ne comprends pas pourquoi ma div (ici un embed Twitch) passe par dessus mon menu en scrollant comme ceci:

puis,

Comment est-ce que je pourrais faire passer menu par dessus ma div s'il vous plait ?

Merci d'avance. Et voici mon code :

      <!-- ///////// HEADER //////// -->

            <header>
               <nav>
                  <div class="menu-icon">
                     <i class="fa fa-bars fa-2x"></i>
                  </div>
                  <div class="logo">
                     Rems Le Vrai
                  </div>
                  <div class="menu">
                     <ul>
                        <li><a href="index.html">Accueil</a></li>
                        <li><a href="pres.html">Présentation</a></li>
                        <li><a href="commande.html">Commandes</a></li>
                        <li><a href="soutien.html">Soutien</a></li>
                     </ul>
                  </div>
               </nav>
            </header>

       <!-- ///////// CONTENU //////// -->

         <div class="contour">
            
            <div  class="test" >
                <div style="padding-top: 56.25%; position: relative; overflow: hidden; border-radius: 20px;">
                  <iframe
                      src="https://player.twitch.tv/?channel=remslevrai&parent=remslevrai.com"
                      allow="fullscreen; dark; darkmode"
                      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
                    </iframe>
                </div>
            </div>

            <div  class="testv2" style="width: 19.25%;">
                <div style="padding-top: 140.5%; position: relative; overflow: hidden; border-radius: 20px;">
                  <iframe
                      id="chat_embed"
                      src="https://www.twitch.tv/embed/remslevrai/chat?parent=remslevrai.com"
                      allow="fullscreen"
                      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
                    </iframe>
                </div>
            </div>
            </div>

    /* ///////////IMPORTS//////////// */

@font-face {
  font-family: "Woodland";
  src: url("Woodland.ttf") format("truetype");
 }

 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

 @font-face {
    font-family: "GT Haptik";
    src: url("GT Haptik Bold.ttf") format("truetype");
   }

   @font-face {
    font-family: "Coolvetica";
    src: url("coolvetica\ rg.otf") format("opentype");
   }

 @font-face {
  font-family: "Cocogoose Pro";
  src: url("Cocogoose Pro-trial.ttf") format("truetype");
 }

 
    /* ///////////BASES//////////// */


body {
    padding: 0;
    margin: 0;
    background: fixed;
    background-size: cover;
    background-color: rgb(255, 255, 255);
    max-height: 1000px;
    max-width: 1920px;
    z-index: 1;
  }
  
  h1 {
    text-align: center;
    padding: 50px 0;
    font-weight: 800;
    margin: 0;
    letter-spacing: -1px;
    color: inherit;
    font-size: 40px;

  }
  
  
  h2 {
    text-align: center;
    font-size: 30px;
    margin: 0;
    font-weight: 300;
    color: inherit;
    padding: 20px;
    padding-left: 0;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    font-family: "Helvetica Neue",sans-serif;
    font-weight: lighter;
}

header {
    width: 100%;
    height: 15vh;
}


  /* ///////////MAIN CONTENT//////////// */

.content {
    width: 94%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}

.menu {
  z-index: 2;
}

small {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
}

.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 40px;
    letter-spacing: 2px;
    font-family: Woodland;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: center;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #26214E;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 41px;
    font-family: Woodland
}

nav ul li a:hover  {
  text-decoration: none;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}



  /* ///////////PHONE WIDTH 786px//////////// */


@media(max-width: 786px) {

    .logo {
          position: fixed;
          top: 0;
          margin-top: 16px;
    }

    nav ul {
          max-height: 0px;
          background: #000;
    }

    nav.black ul {
          background: #000;
    }

    .showing {
          max-height: 34em;
    }

    nav ul li {
          box-sizing: border-box;
          width: 100%;
          padding: 24px;
          text-align: center;
    }

    .menu-icon {
          display: block;
    }

}

.contour {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

  /* ////// EMBED TWITCH ////// */


.test {
  border-radius: 20px;
  width: 48%;
}

.testv2 {
  border-radius: 20px;
  margin-left: 20px;

}

$(document).ready(function() {
  $(".menu-icon").on("click", function() {
        $("nav ul").toggleClass("showing");
  });
});

// Scrolling Effect

$(window).on("scroll", function() {
  if($(window).scrollTop()) {
        $('nav').addClass('black');
        $('nav ul li a').addClass('rajout');
        $('.logo').addClass('rajout');
  }

  else {
        $('nav').removeClass('black');
        $('nav ul li a').removeClass('rajout');
        $('.logo').removeClass('rajout');
  }
})

-
Edité par AdriDev 5 décembre 2021 à 0:36:27

AdriDev

5 décembre 2021 à 0:35:02