Menu d'en-tête réactif avec l'image d'arrière-plan

J'essaie de créer un en-tête réactif avec une image d'arrière-plan. Lorsque j'ajoute l'icône du hamburger du menu off-canvass, j'obtiens une bande de fond de corps affichée en haut de la fenêtre.Menu d'en-tête réactif avec l'image d'arrière-plan

Qu'est-ce que je fais mal?

html, 
 
    body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    position: relative; 
 
    background: red; 
 
    font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif 
 
    } 
 
    .toggle { 
 
    position: absolute; 
 
    right: 0.15em; 
 
    cursor: pointer; 
 
    color: white 
 
    } 
 
    .wrapper { 
 
    max-width: 78.75em; 
 
    margin: auto; 
 
    -webkit-transform: translate(0, 0); 
 
    -ms-transform: translate(0, 0); 
 
    transform: translate(0, 0) 
 
    } 
 
    .container { 
 
    background: yellow; 
 
    min-height: 100%; 
 
    padding: 0; 
 
    margin: 0 
 
    } 
 
    #header label { 
 
    padding: 0 0.125em; 
 
    font: 2.875em/1.4375em Arial 
 
    } 
 
    #header label:hover, 
 
    #menu label:hover { 
 
    color: grey 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" /> 
 
</head> 
 

 
<body> 
 
    <!-- red --> 
 
    <div class="wrapper"> 
 
    <div id="menu"> 
 
    </div> 
 
    <!-- closing "#menu" --> 
 
    <div class="container"> 
 
     <!-- yellow --> 
 
     <div id="header"> 
 
     <img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="float:left; margin:0 0 0 0; max-width:100%; height:auto; border:0" alt="green box" title="green box"> 
 
     <label for="main-nav-check" class="toggle" onclick="" title="Menu">&#x2261;</label> 
 
     </div> 
 
     <!-- closing "#header" --> 
 

 
     <h1>Test header 4</strong></h1> 
 
     <p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p> 
 

 
    </div> 
 
    <!-- closing ".container" --> 
 
    </div> 
 
    <!-- closing ".wrapper" --> 
 
</body> 
 

 
</html>

Source

2015-09-13 Ralph

vous parlez bar rouge au-dessus tête? puis ajoutez le débordement: caché dans la classe .container. –

Merci Leo, cela semble être la réponse. – Ralph

m heureux que je pouvais aider :) –

Je pense que problème est résolu, un coup d'oeil

html, 
 
    body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    position: relative; 
 
    background: red; 
 
    font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif 
 
    } 
 
    .toggle { 
 
    position: absolute; 
 
    right: 0.15em; 
 
    cursor: pointer; 
 
    color: white 
 
    } 
 
    .wrapper { 
 
    max-width: 78.75em; 
 
    margin: auto; 
 
    -webkit-transform: translate(0, 0); 
 
    -ms-transform: translate(0, 0); 
 
    transform: translate(0, 0) 
 
    } 
 
    .container { 
 
    background: yellow; 
 
    min-height: 100%; 
 
    padding: 0; 
 
    margin: 0 
 
    } 
 
    #header label { 
 
    padding: 0 0.125em; 
 
    font: 2.875em/1.4375em Arial 
 
    } 
 
    #header label:hover, 
 
    #menu label:hover { 
 
    color: grey 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" /> 
 
</head> 
 

 
<body> 
 
    <!-- red --> 
 
    <div class="wrapper"> 
 
    <div id="menu"> 
 
    </div> 
 
    <!-- closing "#menu" --> 
 
    <div class="container"> 
 
     <!-- yellow --> 
 
     <div id="header"> 
 
     <img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="max-width:100%; height:auto; border:0" alt="green box" title="green box"> 
 
     <label for="main-nav-check" class="toggle" onclick="" title="Menu">&#x2261;</label> 
 
     </div> 
 
     <!-- closing "#header" --> 
 

 
     <h1>Test header 4</strong></h1> 
 
     <p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p> 
 

 
    </div> 
 
    <!-- closing ".container" --> 
 
    </div> 
 
    <!-- closing ".wrapper" --> 
 
</body> 
 

 
</html>

Source

2015-09-13 07:55:08

bien s'il vous plaît vérifier back.menu icône est dans la prochaine rangée alors qu'il devrait être dans la ligne verte .. –

Menu d'en-tête réactif avec l'image d'arrière-plan

Répondre

Questions connexes