Hamburger Menü zeigt nicht in responsive Navbar

Question

Hallo, ich bin wirklich neu in dieser Web-Programmierung, erst vor ein paar Tagen gelernt, und versuchen, responsive Navbar von mir zu machen. Und ich fand Tutorial auf w3school, ich folgte ihm und ändere etwas Code, aber es funktionierte nicht wie beabsichtigt. Das Menü wird auf die gewünschte Breite reduziert, aber das Hamburgermenü wird nicht angezeigt. Ich denke, ich ändere es schon und passe es meinen Klassen an, aber ich weiß nicht, was sonst noch falsch ist.

Hier ist, was ich versucht habe, so weit:

.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

Ihre HTML verwendet a.icon aber Sie Targeting in CSS mit li.icon. Die class="icon" wurde an die li anstelle der a verschoben und die CSS für .icon ein bisschen modifiziert. Sie haben :not(:first-child()) in der responsiven Ansicht versteckt, und Sie möchten entweder :not(:last-child) verwenden, da .icon die :last-child ist oder einfach :not(.icon) dort verwenden.

.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>