Hamburger menu ne montre pas dans la barre de navigation responsive

Question

Bonjour, je suis vraiment nouveau dans cette programmation web, vient d'apprendre il y a quelques jours, et essayer de faire responsbar navbar de la mienne. Et j'ai trouvé tutoriel sur w3school, je l'ai suivi, et changer du code, mais cela n'a pas fonctionné comme prévu. Le menu réussit à s'effondrer sur la largeur désirée, mais le menu hamburger n'apparaît pas. Je pense que je change déjà et correspond à mes cours, mais je ne sais pas ce qui ne va pas.

Voici ce que je l'ai essayé jusqu'à présent:

.navSection { 
 
    width: 100%; 
 
    display: inline-table; 
 
    line-height: 30px; 
 
    background: #1c948a; 
 
    z-index: 3; 
 
    box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, .3); 
 
} 
 

 
.navMenu .icon{ 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .navMenu ul li:not(:first-child) {display: none;} 
 
    .navMenu ul li.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .navMenu.responsive {position: relative;} 
 
    .navMenu.responsive .icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .navMenu.responsive ul li { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
} 
 

 
.navSectionWrapper { 
 
    width: 90%; 
 
    margin: auto; 
 
} 
 

 
.homelink { 
 
    text-decoration: none; 
 
} 
 

 
.navlogo { 
 
    width: 30%; 
 
    height: 70px; 
 
    float: left; 
 
} 
 

 
.logo { 
 
    display: inline-block; 
 
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; 
 
    color: #2C3E50; 
 
    position: absolute; 
 
} 
 

 
.logoimg { 
 
    height: 70px; 
 
    float: left; 
 
} 
 

 
.logotext { 
 
    font-weight: 600; 
 
    float: right; 
 
    line-height: 70px; 
 
} 
 

 
.logotext>span { 
 
    color: white; 
 
    text-shadow: 2px 2px 2px #33425B; 
 
} 
 

 
.navMenu { 
 
    float: right; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 

 
.navMenu>ul { 
 
    list-style: none; 
 
} 
 

 
.navMenu>ul>li { 
 
    display: inline-block; 
 
    line-height: 70px; 
 
} 
 

 
.navMenu>ul>li>a>span { 
 
    color: white; 
 
    font-weight: 700; 
 
    font-size: 17px 
 
} 
 

 
.navMenu>ul>li>a { 
 
    text-decoration: none; 
 
    color: #2C3E50; 
 
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; 
 
    font-weight: 600; 
 
    margin: 10px 
 
} 
 

 
.navMenu>ul>li>a:hover { 
 
    color: snow; 
 
}

<div class="navSection"> 
 
     <div class="navSectionWrapper"> 
 
      <div class="navlogo"> 
 
       <a href="#" class="homelink"> 
 
        <div class="logo"> 
 
         <img src="img/logo.png" class="logoimg"> 
 
         <h2 class="logotext">Let's<span>Go</span></h2> 
 
        </div> 
 
       </a> 
 
      </div> 
 
      <div class="navMenu" id="mynavMenu"> 
 
       <ul> 
 
        <li><a href="#">Home</a></li> 
 
        <li><a href="#">Features</a></li> 
 
        <li><a href="#">About</a></li> 
 
        <li><a href="#">+<span>Download</span></a></li> 
 
        <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 
<script> 
 
     function myFunction() { 
 
      var x = document.getElementById("mynavMenu"); 
 
      if (x.className === "navMenu") { 
 
       x.className += " responsive"; 
 
      } else { 
 
       x.className = "navMenu"; 
 
      } 
 
     } 
 
</script>

ThankYou

Answer 1

Votre HTML utilise a.icon mais vous ciblez en CSS avec li.icon. Déplacé le class="icon" au li au lieu du a et modifié le CSS pour .icon un peu. Vous vous êtes caché :not(:first-child()) dans la vue responsive, et vous voulez soit utiliser :not(:last-child) puisque .icon est le :last-child ou simplement utiliser :not(.icon) à la place.

.navSection { 
 
    width: 100%; 
 
    display: inline-table; 
 
    line-height: 30px; 
 
    background: #1c948a; 
 
    z-index: 3; 
 
    box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, .3); 
 
} 
 

 
.navMenu .icon{ 
 
    display: none; 
 
    float: right; 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .navMenu ul li:not(.icon) {display: none;} 
 
    .navMenu ul li.icon { 
 
    display: block; 
 
    } 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .navMenu.responsive {position: relative;} 
 
    .navMenu.responsive .icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .navMenu.responsive ul li { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
} 
 

 
.navSectionWrapper { 
 
    width: 90%; 
 
    margin: auto; 
 
} 
 

 
.homelink { 
 
    text-decoration: none; 
 
} 
 

 
.navlogo { 
 
    width: 30%; 
 
    height: 70px; 
 
    float: left; 
 
} 
 

 
.logo { 
 
    display: inline-block; 
 
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; 
 
    color: #2C3E50; 
 
    position: absolute; 
 
} 
 

 
.logoimg { 
 
    height: 70px; 
 
    float: left; 
 
} 
 

 
.logotext { 
 
    font-weight: 600; 
 
    float: right; 
 
    line-height: 70px; 
 
} 
 

 
.logotext>span { 
 
    color: white; 
 
    text-shadow: 2px 2px 2px #33425B; 
 
} 
 

 
.navMenu { 
 
    float: right; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 

 
.navMenu>ul { 
 
    list-style: none; 
 
} 
 

 
.navMenu>ul>li { 
 
    display: inline-block; 
 
    line-height: 70px; 
 
} 
 

 
.navMenu>ul>li>a>span { 
 
    color: white; 
 
    font-weight: 700; 
 
    font-size: 17px 
 
} 
 

 
.navMenu>ul>li>a { 
 
    text-decoration: none; 
 
    color: #2C3E50; 
 
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; 
 
    font-weight: 600; 
 
    margin: 10px 
 
} 
 

 
.navMenu>ul>li>a:hover { 
 
    color: snow; 
 
}

<div class="navSection"> 
 
     <div class="navSectionWrapper"> 
 
      <div class="navlogo"> 
 
       <a href="#" class="homelink"> 
 
        <div class="logo"> 
 
         <img src="img/logo.png" class="logoimg"> 
 
         <h2 class="logotext">Let's<span>Go</span></h2> 
 
        </div> 
 
       </a> 
 
      </div> 
 
      <div class="navMenu" id="mynavMenu"> 
 
       <ul> 
 
        <li><a href="#">Home</a></li> 
 
        <li><a href="#">Features</a></li> 
 
        <li><a href="#">About</a></li> 
 
        <li><a href="#">+<span>Download</span></a></li> 
 
        <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 
<script> 
 
     function myFunction() { 
 
      var x = document.getElementById("mynavMenu"); 
 
      if (x.className === "navMenu") { 
 
       x.className += " responsive"; 
 
      } else { 
 
       x.className = "navMenu"; 
 
      } 
 
     } 
 
</script>