'Navigation Drop Down Covers Hero Image
My drop down navigation in the 1st and 2nd media queries just cover the hero image instead of pushing the hero image down, also the width of the drop down is suspiciously small. I have a working example on a different website I made, but I can't figure the difference that causes it to break on this one. I hope someone knows what is causing this and/or how to fix it. Here is the code:
*{
font-family: 'Zilla Slab';
}
nav ul li a {
margin-left: 5%;
text-decoration: none;
color: rgb(219,183,86);
font-weight: bold;
}
nav ul li {
display: inline;
list-style-type: none;
width: 100%;
margin-bottom: 20%;
}
nav {
position: absolute;
top: 70px;
right: 2px;
width: 550px;
height: 10px;
}
#hamburger, label {
display: none;
}
h1{
color: rgb(219,183,86);
}
.infobox {
width: 35%;
float: left;
margin: 2%;
}
.button {
width: 180px;
height: 180px;
}
.button a{
text-decoration: none;
font-weight: bold;
font-size: 1.4em;
color: rgb(219,183,86);
}
.button a p{
position: relative;
top: -25px;
}
.button img{
width: 120px;
height: 120px;
}
#buttons{
float: left;
margin-left: 5%;
}
#header{
text-align: center;
position: absolute;
top: -10px;
left: 2px;
width: 550px;
height: 10px;
}
#logo{
float: left;
width: 240px;
height: 175px;
position: absolute;
right: 315px;
}
#logoname{
font-size: 35px;
color: rgb(219,183,86);
font-weight: bold;
position: relative;
top: 35px;
left: 130px;
}
#content{
text-align: center;
width: 100%;
margin: auto;
}
#hero{
margin: 0;
width: 100%;
margin-top: 180px;
}
#footer{
clear: both;
float: none;
font-style: italic;
text-align: center;
margin-bottom: 2%;
color: ;
}
@media screen and (max-width: 1088px) and (min-width: 705px){
#buttons{
float: none;
clear: both;
width: 100%;
margin-left: 1%;
}
.button{
text-align: center;
display: inline-block;
}
/* Menu Items */
/* Menu Items */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding: 1%;
box-sizing: border-box;
margin-bottom: 10px;
}
nav ul li a {
text-decoration: none;
}
/* Show Hamburger */
label {
display: block;
position: absolute;
top: -45px;
right: 20px;
color: white;
color: rgb(219,183,86);
font-style: normal;
font-size: 3.5em;
padding: 3%;
font-weight: bold;
}
/* Break down menu items into vertical */
nav ul li {
display: block;
}
nav ul li {
border-top: solid grey 1px;
}
/* Toggle show/hide menu on checkbox click */
nav ul {
display: none;
}
nav input:checked ~ ul {
display: block;
}
.infobox {
width: 46%;
}
}
@media screen and (max-width: 704px) {
.infobox {
width: 96%;
}
#buttons{
float: none;
display: block;
clear: both;
margin-left: 33%;
}
#logo{
float: left;
width: 160px;
height: 110px;
right: 390px;
}
#logoname{
font-size: 20px;
color: rgb(219,183,86);
font-weight: bold;
position: relative;
top: 20px;
left: -10px;
}
/* Menu Items */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding: 1%;
box-sizing: border-box;
margin-bottom: 10px;
}
nav ul li a {
text-decoration: none;
}
/* Show Hamburger */
label {
display: block;
position: absolute;
top: -80px;
right: 20px;
color: white;
color: rgb(219,183,86);
font-style: normal;
font-size: 3.5em;
padding: 3%;
font-weight: bold;
}
/* Break down menu items into vertical */
nav ul li {
display: block;
}
nav ul li {
border-top: solid grey 1px;
}
/* Toggle show/hide menu on checkbox click */
nav ul {
display: none;
}
nav input:checked ~ ul {
display: block;
}
#hero{
margin-top: 110px;
}
} <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab&display=swap" rel="stylesheet">
<div id="container">
<div id="header"><img id="logo" src="https://cdn.discordapp.com/attachments/644747093558165514/974882993036472370/logo.png" alt="logo" /><p id="logoname">Bizzy B's TUMBLEBUS</p></div>
<nav>
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="parties.html">Parties</a></li>
<li><a href="policies.html">Policies</a></li>
<li><a href="inside.html">Inside</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="content">
<img id="hero" src="https://cdn.discordapp.com/attachments/644747093558165514/974882992591884348/hero.png" alt="hero" />
<h1>Welcome to the TUMBLEBUS </h1>
<div class="infobox">
<p> The TUMBLEBUS is a full sized school bus that has been converted into a safe and fun child sized
gym bringing fitness and fun to your children.
The TUMBLEBUS is equipped with tumbling and climbing equipment including monkey bars, trampoline, bars,
beam, vault, zip line, rings, slide and lots more!
</p>
</div>
<div class="infobox">
<p>We are excited that you
have decided to take the time
to tumble through to learn
about TUMBLEBUS. We have a
unique and fun way to keep your
little ones happy and fit. We would
love to come to your child's daycare,
school, birthday or special event.
Please contact us to learn more about how we can buzz the fun to your little one!
</p>
</div>
<div id="buttons">
<div class="button"><a href="contact.html"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993955041290/enroll.png" alt="enroll" /><p>Enroll</p></a></div>
<div class="button"><a href="contact.html"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993661427742/pay.png" alt="pay" /><p>Pay</p></a></div>
<div class="button"><a href="contact.html"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993430732810/order.png" alt="order" /><p>Order</p></a></div>
</div>
<div id="footer">
<p>TUMBLEBUS<br/>
11230 Triple Crown Drive<br/>
Flint TX 75762
</p>
</div>
</div>
</div>Solution 1:[1]
I guess The problem is caused by position : absolute
try to delete position : absolute or add position :relativeto your nav .
Tell me what happens
Update : the problem was caused by #header{ position : absolute ; }
Removing it solved the problem.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |