Hey, I'm having an issue with my website header. It looks great on full-width screens, but I need to address low screen resolutions using @media queries. I have a checkbox that reveals the menu items when checked. However, I'm facing an overlay problem where the div.overlay on the page is covering my content and items. Can you help me troubleshoot this? Check out my code on jsFiddle: myTry
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Blog Bundle</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<header class="box box-top">
<div class="wrap">
<span class="logo">Mobile blog</span>
<div class="spacer"></div>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
<div class="menu" id="menu">
<a href="#" class="box-item box-item-blue">Iphone</a>
<a href="#" class="box-item box-item-green">Samsung</a>
<a href="#" class="box-item box-item-red">Huawei</a>
<a href="#" class="box-item box-item-white">Blackberry</a>
<a href="#" class="box-item box-item-yellow">Sony</a>
<a href="#" class="box-item box-item-purple">LG</a>
<a href="#" class="box-item box-item-orange">Nokia</a>
<a href="" class="box-item pull-right">Log In</a>
</div>
</div>
</header>
<div class="container">
<div class="intro-image" style="background-image: url('img/cover.png');">
<div class="overlay"></div>
</div>
</div>
... (remaining code unchanged)
If you have any suggestions on how to fix it, please let me know. Your assistance is greatly appreciated! Apologies for any language issues.