Menu
I've gotten my navbar to work like I wanted, mostly, but now, again, I am having the problem, that when I minimize the window, the navbar with all its links collapses, and it almost looks quite decent, but it covers over my content area and some of the link text runs over the navbar area and I have to hide that and etc. So the simplest way I thought was to have navbar not move at all, and just be scrollable with the entire page.
Here is my CSS:
#navBar{
width: 100%;
float: left;
position: fixed;
top: 0;
background-color: #000000;
left: 0;
}
#navBar ul{
margin: 0 auto;
height: 65px;
list-style:none;
min-width:760px;
}
#navBar li{
float: left;
height: 65px;
}
#navBar li a:link , a:visited{
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px "open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover{
background-color: #ffffff;
color: #000000;
text-decoration: none;
Here is my HTML:
<body>
<nav>
<div id="navBar">
<ul>
<li><a href="esileht.html">ESILEHT</a></li>
<li><a href="uudised.html">UUDISED</a></li>
<li><a href="ülevaated.html">ÜLEVAATED/ARVUSTUSED</a></li>
<li><a href="login.html" id="logimine">LOGI SISSE</a></li>
</ul>
</div>
</nav>
<div class="content">
<div id="logo">
<img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
</div>
</div>
<div class="artikkel">
<p>check check</p>
</div>
</body>
</html>
Would appreciate some help, my first real webpage that I am working on, been trying quite a few things, but cannot seem to find a compromise, always one thing works and then the other thing wont work as intended..
694
asked Dec 31 '25 02:12
You should remove position:absolute; and float:left; on #navBar like this :
FIDDLE
CSS :
#navBar {
width: 100%;
background-color: #000000;
left: 0;
overflow: hidden;
}
#navBar ul {
margin: 0 auto;
height: 65px;
list-style:none;
}
#navBar li {
float: left;
height: 65px;
}
#navBar li a:link, a:visited {
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px"open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover {
background-color: #ffffff;
color: #000000;
text-decoration: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
