Make div 100% width of page
Question
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>
1 answers
solution1
0 2015-08-04 20:22:22
you could add position: relative; to #header and position: absolute; to #navigation plus top: 69px /*adjust to your needs*/ inside @media only screen and (max-width : 920px) {}
the absolute position takes it out of the flow.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.