0

I'm trying to create a responsive header with a background image. When I add the off-canvass menu hamburger icon, I get a band of body background displayed at the top of the viewport.

What am I doing wrong?

  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>
Ralph
  • 1
  • 3

1 Answers1

0

I think problem is solved, have a look

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>
Sachin Kanungo
  • 1,054
  • 9
  • 17