Simple CSS. Horizontal menu doesn't keep its length when position: fixed
Question
I'm at my first HTML and CSS project and the code has a mind of its own!
So... I did a horizontal menu. It displays really cool, with the background color on the entire page width.
But when I want to make it position: fixed, so that it stays on the page when the width is small, the background color disappears from the width.
The HTML:
<div class="nav"> <ul> <li class="selected"><a href="tema.html">Job Description Details</a></li> <li><a href="">Audit Trail</a></li> <li><a href="">Files</a></li> </ul> </div>
The CSS without the fixed position, which works great.
.nav { background-color: #488AC7; margin: none; } .nav ul { margin: 0px; list-style-type: none; padding: 5px 0px 5px 0px; } .nav ul li { display: inline; padding: 5px 10px 5px 10px; } .nav ul li a:link, .nav ul li a:visited { color: #F0FFFF; border-bottom: none; font-weight: bold; } .nav ul li.selected { background-color: #F0FFFF; border-bottom: none; } .nav ul li.selected a:link, .nav ul li.selected a:visited { color: #488AC7; }
and the CSS code which makes the color go away:
.nav ul { margin: 0px; list-style-type: none; padding: 5px 0px 5px 0px; position: fixed; margin-left: 0px; }
4 answers
solution1
0 ACCPTED 2016-01-24 09:23:24
try this ... this will work when position is fixed
.nav {
background-color: #488AC7;
margin: none;
width:100%;
position:fixed;
}
fix yor .nav not the ul . if you want try this complete code, just copy and paste.then run
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.mynavbar{
text-align: center;
padding: 1%;
background-color: black;
position: fixed;
width: 100%;
}
ul li{
list-style-type: none;
display: inline;
width: auto;
margin: 5%;
}
ul li a{
text-decoration: none;
font-family: helvetica;
font-size: 20px;
color:white;
}
ul li a:hover{
color: red;
}
</style>
<body>
<div class="mynavbar">
<ul>
<li class="selected"><a href="tema.html">Job Description Details</a></li>
<li><a href="">Audit Trail</a></li>
<li><a href="">Files</a></li>
</ul>
</div>
</body>
</html>
solution2
0 2016-01-24 09:27:33
position:fixed; is supposed to fix the position of the element relative to the viewport, regardless scroll. So you will have to provide a width to the element.
View the entire working code at https://jsfiddle.net/2j8s8xfz/1/
body{ min-height:900px; } .nav { background-color: #488AC7; margin: none; position:fixed; width:100%; } .nav ul { margin: 0px; list-style-type: none; padding: 5px 0px 5px 0px; } .nav ul li { display: inline; padding: 5px 10px 5px 10px; } .nav ul li a:link, .nav ul li a:visited { color: #F0FFFF; border-bottom: none; font-weight: bold; } .nav ul li.selected { background-color: #F0FFFF; border-bottom: none; } .nav ul li.selected a:link, .nav ul li.selected a:visited { color: #488AC7; }
<body> <div class="nav"> <ul> <li class="selected"><a href="tema.html">Job Description Details</a></li> <li><a href="">Audit Trail</a></li> <li><a href="">Files</a></li> </ul> </div> </body>
Read more about positioning at http://www.w3schools.com/css/css_positioning.asp
solution3
0 2016-01-24 09:27:54
update nav class:
.nav {
background-color:#488AC7;
margin:none
position:fixed;
width:100%;
top:0;
}
solution4
0 2016-01-24 09:47:21
Add only width: 100%; to ul you will get background color over full width of page
.nav ul { margin: 0px; list-style-type: none; padding: 5px 0px 5px 0px; position: fixed; margin-left: 0px; width: 100%; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.