Looking to create a fixed navigation bar but encountering space above the menu. I've tried various solutions to no avail, searching through the code for any potential spacing issues.
#nav {
position: fixed;
text-align: center;
font-size: 22px;
background-color: #222222;
margin: 0 auto;
width: 100%;
}
#nav ul li a {
color: #ccc;
display: block;
padding: 10px;
text-decoration: none;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background: #333333;
}
#nav ul li a:hover {
text-shadow: 3px 2px 3px #333333;
text-decoration: none;
position: relative;
bottom: 5px;
color: #fdde00;
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}<div id="nav">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit... velit...