When I click on the "hamburger" mobile navigation button, it brings up a div called #navigation. However, the positioning of this div within other divs causes it to extend to only 100% of the width of its container div, rather than the entire document.
In addition to this issue, there is also overlap between the navigation div and both the header div and the one below it. Ideally, I would like the navigation div to push the header up and the subsequent div down instead.
Moving the div out of the container could potentially solve these problems, but it would create complications with the full-size version of the page as the #navigation div is used for both versions with different styling. Below is the code snippet:
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;
} ...