Hello guys, I’ve just started Web development course on FCC, I also decided it would be a good idea to also build a small website of my own, I’m feeling pretty stupid but actually took me two hours to build something which would normally take maybe few minutes and now I’m stuck, I want to make my menu bar fixed, so whenever user scrolls down, it follows, but whenever I use the position:fixed, whole website breaks apart.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>Project NSM</title>
</head>
<body>
<ul id="menubar">
<a href="index.html" class="menuitem"><li>Main</li></a>
<a href="#" class="menuitem"><li>Tutorial</li></a>
<a href="#" class="menuitem"><li>Books</li></a>
<a href="#" class="menuitem"><li>Exercises</li></a>
<a href="#" class="menuitem"><li>Contact</li></a>
</ul>
</body>
</html>
CSS
body
{
background-color:#28262C;
}
#menubar{
margin:0px;
padding:0px;
list-style-type: none;
background-color: #D4C2FC;
height: 40px;
}
#menubar li {
padding-top:10px;
font-family:Arial;
height:40px;
text-decoration:none;
font-weight:bold;
color:black;
margin-left:25px;
float:left;
font-size:15px;
}
#menubar li a {
text-decoration: none;
}
#menubar a li:hover{
font-family:Helvetica;
height:30px;
color: cornsilk;
font-weight:bold;
background-color:#998FC7;
font-size:17px;
opacity: 0.9;
}