Currently, I am in the process of making my portfolio website responsive by using media queries. For mobile screens, I have successfully implemented a nav select drop down menu. However, when it comes to iPad screens, I want to display a regular menu. To achieve this, I set the drop down menu to "display: none;" in my CSS.
However, a peculiar issue has arisen. While the drop down menu is not visible on the screen, it is still selectable. This causes interference with my regular menu functionality as well as affects the positioning of the divs placed under the menu as if the drop down menu were still present.
I am puzzled about why the drop down menu remains selectable even though it is hidden. Any assistance or guidance would be greatly appreciated!
Below are the snippets of code that I believe are most relevant:
HTML
<div id="menu">
<nav>
<ul>
<li><a href="camera.html">camera / editing</a></li>
<li><a href="interface.html">interface</a></li>
<li><a href="illustration.html">illustration</a></li>
<li><a href="drawing.html">drawing</a></li>
</ul>
</nav>
</div>
<nav>
<select>
<option selected>Find my work here!</option>
<option value="camera.html">Camera / Editing</option>
<option value="interface.html">Interface</option>
<option value="illustration.html">Illustration</option>
<option value="drawing.html">Drawing</option>
</select>
</nav>
<div id="bio"><a href="#">About Me</a>
<p>Lorem ipsum dolor sit amet</p></div>
</div>
CSS
For Mobile View:
nav{
top: 0;
width: 100%;
padding-top: 1em;
padding-bottom: .7em;
height: 80px;
background: url("afb/top fade.png") top center no-repeat;
}
nav select{
position: relative;
width: 100%;
font-size: 1em;
opacity: 1;
}
For iPad View:
#menu{
padding-left: 3em;
padding-right: 3em;
}
nav{
background-image: none;
position: static;
}
nav select{
display: none;
}
nav ul:first-of-type{
position: static;
width: 100%;
display: block;
list-style: none;
font-size: 1.4em;
}
(Do feel free to visit the complete website at - simply adjust the browser size to observe the issues mentioned above)