Check out this awesome fiddle here! My menu bar looks great at the top, but for some reason it won't stay in place when the user scrolls down. I've tried adding position:fixed to the CSS under the first #cssmenu, but it messes everything up.
Here's the snippet code:
@font-face {
font-family:'Abraham Lincoln';
src: url(../fonts/Abraham-Lincoln/AbrahamLincoln.ttf);
}
@font-face {
font-family:'Ingleby';
src: url(../fonts/Ingleby/Ingleby_regular);
}
body {
font-family:'Ingleby';
background-image: url(../Images/background.jpg);
background-repeat: repeat;
width: 100%;
margin: 0px;
padding: 0px;
}
.clearfix:after {
display: block;
clear: both;
}
h2.names {
font-size: 36px;
text-align: center;
font-family:'Abraham Lincoln';
}
h3.date {
font-size: 28px;
text-align: center;
font-family:'Abraham Lincoln';
margin-top: -20px;
}
h4 {
font-size: 20px;
text-align: center;
font-family:'Abraham Lincoln';
}
p {
width: 960px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
.background {
width: 960px;
display: block;
margin: 0px auto;
margin-top: 0px;
}
footer {
text-align: right;
font-size: 12px;
height: 30px;
background-color: rgb(59, 58, 76);
width: 100%;
padding-top: 5px;
padding-bottom: 10px;
}
footer a {
...
<p>I absolutely love this webpage!</p>
<p>It is soooooo cool!</p>