1

I have a "hamburger" mobile navigation button that when clicked brings up a div titled #navigation. However, due to where the div is positioned (it is in other divs) the div does not extend to 100% of the width of the document, just 100% of the width of the container div.

Not only is this a problem but there is also a secondary issue because the navigation div also overlaps slightly with both the header div and the div below it. I'd rather it push the header up and the div below it down.

Whilst I could take this div out of the container and possibly fix the problems by placing it elsewhere, that then causes problems with the navigation on the full size version of the page then as the #navigation div is the same for both versions of the page, just different styling. Here's the code.

body {
    margin: 0;
	line-height: 1.428;
	}
.wrap {
  	width: 90%;
  	max-width: 71.5em;
  	margin: 0 auto;
  	padding: 0.625em 0.625em;
}
#header {
	background: #442869; 
	padding-top: 1em;
	padding-bottom: 1em;
	min-height: 6em;
}
#mobile-navigation-btn {
	display: none;
	float: right; 
}
#navigation {
	display: block;
	float: right;
}

#navigation ul {

	list-style: none;

}

#navigation li {

	display: inline-block;
	float: left;
	padding-right: 2em;
	padding-top: 0.7em;
	padding-bottom: 0.7em;

}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
	color: #ffffff;
		text-decoration: none; 
}

.show-menu {
	text-decoration: none;
	color: black;
	background: #ac3333;
	text-align: center;
	padding: 20px 10px;
border: 1px black solid;


}

.show-menu:hover {
	background: #ac1111;
}
#extra {
	background: #222922; 
	padding-top: 1em;
	padding-bottom: 1em;
	min-height: 2em;
	color: white;

}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
    display: block;
}


#hamburger {
display: inline-block;
}

.icon-bar {
display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin-bottom: 4px;
    background-color: black;

}

@media only screen and (max-width : 920px) {
#mobile-navigation-btn {
	display: block;
	}
	
#navigation {
	display: none;
	width: 100%;
   margin: 0;
   padding: 0;
   background-color:#333333;
   top: 0;
   left: 0;
}

	/*Create vertical spacing*/
	#navigation li {
		margin-bottom: 1px;
	}
	/*Make dropdown links vertical*/
#navigation ul li {
	display: block;
	float: none;
	  margin:0;
  padding:0;
}

	/*Make all menu links full width*/
	#navigation ul li, li a {
		width: 100%;
	}
}
<!doctype html>
<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="picturefill.min.js" async>
  </script>
  <title>
  </title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="header">
    <div class="wrap">
      
      <picture>
        <source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
        <img srcset="seiri-logo-small.png" alt="…">
      </picture>
      
      <div id="mobile-navigation-btn">
        <label for="show-menu" class="show-menu">
          <div id="hamburger">
            <span class="icon-bar">
            </span>
            <span class="icon-bar">
            </span>
            <span class="icon-bar">
            </span>
          </div>
          Menu
        </label>
    	
      </div>
      
      <input type="checkbox" id="show-menu" role="button">
      <div id="navigation">
        <ul>
          <li>
            <a href="#" class="current">
              Home
            </a>
          </li>
          <li>
            <a href="#">
              Customer Research
            </a>
          </li>
          <li>
            <a href="#">
              Business Improvement
            </a>
          </li>
          <li>
            <a href="#">
              Contact Us
            </a>
          </li>
          <li>
            <a href="#">
              Blog
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <div id="extra">
    <div class="wrap">
      Test
    </div>
  </div>
  
</body>
</html>

I posted previously and had some advice that perhaps adding "position: relative" to #header and "position: absolute" to #navigation (plus using "top" to adjust its location) would solve the problem, but this doesn't work too well either as it doesn't push the divs below it down to account for the space the navigation takes up!

Any help would be greatly appreciated.

3
  • Have you tried adding position:absolute; to your #navigation id? Then you can set the property top:68px; so you can see the menu underneath.
    – crazymatt
    Aug 19, 2015 at 20:53
  • I mentioned that at the bottom of the message as a possibility - I also said that this doesn't work too well as it doesn't push the divs below it down to account for the space the navigation takes up! Aug 20, 2015 at 12:12
  • If thats the case you will probably have to restructure the way your code is set up and use JQuery to toggle the menu height.
    – crazymatt
    Aug 20, 2015 at 18:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.