Navigation mobile background-color

Question

Je suis une pigiste débutante qui travaille actuellement sur un site web pour un collègue. Je suis un peu nouveau dans la partie responsive du codage. J'ai codé un morceau décent maintenant et le site Web est presque fait à mes yeux mais il a besoin d'une certaine perfection.

Mon problème est que lorsque je place du contenu dans mon menu de navigation, il annule la couleur de fond de mon menu nav. S'il y a quelqu'un qui connaît ce type d'erreur et qui pourrait m'aider à le résoudre, j'en serais très heureux!

Voici le code:

.nav { 
 
    border-bottom: 2px solid #25b24a; 
 
    text-align: right; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-family: "helvetica neue", sans-serif; 
 
    text-transform: uppercase; 
 
} 
 

 
.nav .Logo { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-image: url(../img/logo2.png); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 

 
.menu { 
 
    margin: 0 30px 0 0; 
 
} 
 

 
.menu a { 
 
    clear: right; 
 
    text-decoration: none; 
 
    color: #25b24a; 
 
    margin: 0 10px; 
 
    line-height: 50px; 
 
    font-size: 12px; 
 
} 
 

 
.menu a:hover { 
 
    clear: right; 
 
    text-decoration: none; 
 
    color: #256FB8; 
 
    margin: 0 10px; 
 
    line-height: 50px; 
 
    font-size: 12px; 
 
    transition: .6s; 
 
} 
 

 
label { 
 
    margin: 0 40px 0 0; 
 
    font-size: 26px; 
 
    line-height: 50px; 
 
    display: none; 
 
    width: 26px; 
 
    float: right; 
 
    color: #25b24a; 
 
} 
 

 
#toggle { 
 
    display: none; 
 
} 
 

 
@media only screen and (max-width: 500px) { 
 
    label { 
 
    display: block; 
 
    cursor: pointer; 
 
    } 
 
    .menu { 
 
    text-align: center; 
 
    width: 100%; 
 
    display: none; 
 
    } 
 
    .menu a { 
 
    display: block; 
 
    border-bottom: 2px solid #25a24b; 
 
    margin: 0; 
 
    color: #25a24b; 
 
    background-color: white; 
 
    } 
 
    .menu a:hover { 
 
    display: block; 
 
    border-bottom: 2px solid #25a24b; 
 
    margin: 0; 
 
    color: #256fb8; 
 
    } 
 
    .menu a.li { 
 
    display: block; 
 
    } 
 
    #toggle:checked+.menu { 
 
    display: block; 
 
    } 
 
} 
 

 
#Home { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
#Home .banner { 
 
    padding-top: 100px; 
 
    width: 100%; 
 
    height: 300px; 
 
    background: #ccc url(../img/headerfoto1.jpg) center center no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.container { 
 
    width: 1000px; 
 
    height: auto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.container p.home-text { 
 
    padding: 0px 20px 20px 20px; 
 
    width: 480px; 
 
} 
 

 
#Home .container .button { 
 
    margin-left: 20px; 
 
    padding: 10px 20px 10px 20px; 
 
    width: 135px; 
 
    background: #256fb8; 
 
    color: white; 
 
    font-family: Gotham, Helvetica Neue, Helvetica, Arial, " sans-serif"; 
 
    border-bottom: 2px solid #000; 
 
} 
 

 
#Home .container .button:hover { 
 
    background: #25b24a; 
 
    transition: .5s; 
 
    border-bottom: 2px solid #000; 
 
} 
 

 
#Home .container .button a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 

 
/* Mobiel Home */ 
 

 
@media only screen and (max-width: 500px) { 
 
    h1 { 
 
    font-family: Gotham, Helvetica Neue, Helvetica, Arial, " sans-serif"; 
 
    font-size: 18px; 
 
    color: #256FB8; 
 
    padding: 10px 0px 0px 20px; 
 
    } 
 
    header { 
 
    background-color: #fff; 
 
    width: 100%; 
 
    box-shadow: none; 
 
    height: 50px; 
 
    } 
 
    header nav { 
 
    width: 90%; 
 
    height: 50px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    } 
 
    header nav .Logo { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-image: url(../img/logo2.png); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    float: left; 
 
    margin-top: -34px; 
 
    } 
 
    header nav a.hamburger { 
 
    display: block; 
 
    font-size: 24px; 
 
    text-align: right; 
 
    margin-right: 10px; 
 
    margin-top: 10px; 
 
    } 
 
    header nav ul { 
 
    width: 450px; 
 
    height: auto; 
 
    } 
 
    header nav ul li { 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    display: none; 
 
    } 
 
    #Home .banner { 
 
    padding-top: 150px; 
 
    width: 100%; 
 
    height: 80px; 
 
    background: #ccc url(../img/headerfoto1.jpg) center center no-repeat; 
 
    background-size: cover; 
 
    } 
 
    .container { 
 
    width: 350px; 
 
    height: auto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    } 
 
    .container p.home-text { 
 
    padding: 0px 4px 4px 15px; 
 
    width: 320px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    } 
 
}

<div class="nav"> 
 
    <div class="Logo"> 
 
    <!-- Logo in css --> 
 
    </div> 
 
    <label for="toggle">&#9776;</label> 
 
    <input type="checkbox" id="toggle" /> 
 
    <div class="menu"> 
 
    <a class="li" href="#Home"> Home </a> 
 
    <a class="li" href="#Diensten"> Diensten </a> 
 
    <a class="li" href="#Werkwijze"> Werkwijze </a> 
 
    <a class="li" href="#Over-mij"> Over Mij </a> 
 
    <a class="li" href="#Contact"> Contact </a> 
 
    </div> 
 
</div> 
 

 
<div id="Home"> 
 
    <div class="banner"> 
 
    <!-- banner afbeelding in css --> 
 

 
    </div> 
 

 
    <div class="container"> 
 
    <h1> Mobile navigation, background-color </h1> 
 
    <p class="home-text"> 
 
     I want the mobile navigation menu to have a white solid background. The problem is; once I put more content into the html it somehow cancels out the background-color in the navigation menu. I hope someone could help me. Thanks! 
 
    </p> 
 

 
    <div class="button"> <a href="#Diensten"> button </a> </div> 
 
    </div> 
 

 
</div>

Merci!

Answer 1

Votre contenu est placé après le menu, est donc indiquée ci-dessus l'élément principal.

Vous devez ajouter un z-index plus élevé, comme indiqué ci-dessus. Pour z-index pour prendre effet, vous devez également spécifier une position différente de celle par défaut (statique. Ajoutez ceci à l'élément de navigation

.nav { 
position:relative; 
z-index: 1; 
} 

Answer 2

Voici comment il est censé ressembler à: https://codepen.io/jessekoops10/pen/VMBPdY

/* HTML */ 

<html> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
<body> 

    <div class="nav"> 
       <div class="Logo"> <!-- Logo in css --> </div> 
     <label for="toggle">&#9776;</label> 
     <input type="checkbox" id="toggle"/> 
     <div class="menu"> 
      <a class="li" href="#Home"> Home </a> 
      <a class="li" href="#Diensten"> Diensten </a> 
      <a class="li" href="#Werkwijze"> Werkwijze </a> 
      <a class="li" href="#Over-mij"> Over Mij </a> 
      <a class="li" href="#Contact"> Contact </a> 
     </div> 
    </div> 


</body> 
</html> 


/* CSS */ 

.nav { 
    border-bottom: 2px solid #25b24a; 
    text-align: right; 
    height: 50px; 
    line-height: 50px; 
    font-family: "helvetica neue", sans-serif; 
    text-transform: uppercase; 
} 

.nav .Logo { 
    width: 50px; 
    height: 50px; 
    background-image: url(../img/logo2.png); 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    float: left; 
    margin-left: 20px; 
} 


.menu { 
    margin: 0 30px 0 0; 
} 

.menu a { 
    clear: right; 
    text-decoration: none; 
    color: #25b24a; 
    margin: 0 10px; 
    line-height: 50px; 
    font-size: 12px; 
} 

.menu a:hover { 
    clear: right; 
    text-decoration: none; 
    color: #256FB8; 
    margin: 0 10px; 
    line-height: 50px; 
    font-size: 12px; 
    transition: .6s; 
} 

label { 
    margin: 0 40px 0 0; 
    font-size: 26px; 
    line-height: 50px; 
    display: none; 
    width: 26px; 
    float: right; 
    color: #25b24a; 
} 
#toggle { 
    display: none; 
} 


    @media only screen and (max-width: 500px) { 
     label { 
      display: block; 
      cursor: pointer; 
     } 

     .menu { 
      text-align: center; 
      width: 100%; 
      display: none; 
     } 

     .menu a { 
      display: block; 
      border-bottom: 2px solid #25a24b; 
      margin: 0; 
      color: #25a24b; 
      background-color: aqua; 
     } 

     .menu a:hover { 
      display: block; 
      border-bottom: 2px solid #25a24b; 
      margin: 0; 
      color: #256fb8; 
     } 

     .menu a.li { 
      display: block; 
     } 


     #toggle:checked + .menu { 
      display: block; 
     } 

    }