我为客户的网站制作了以下导航栏。但是最后客户告诉我要把这个导航栏固定在上面,显然从头开始构建一个导航栏只是为了让它固定在上面需要很多时间和精力。有什么方法可以通过修改 CSS 将现有的导航栏固定在顶部?
HTML:
body
{
margin: 0;
background: #222;
font-weight: 300;
background-image: url('bg.jpeg');
}
header
{
background: #d9c2ac;
position: relative;
}
header::after
{
content: '';
display: table;
clear: both;
}
nav
{
float: left;
}
nav ul
{
margin: 0;
padding: 0;
list-style: none;
}
nav li
{
display: inline-block;
margin-left: 70px;
padding-top: 30px;
position: relative;
}
nav ul li a
{
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
nav a:hover
{
}
nav a::before
{
content: '';
display: block;
height: 5px;
width: 0%;
background-color: #444;
transition: all ease-in-out 500ms;
}
nav ul li:last-child
{
position: absolute;
right: 0;
bottom: 0;
margin: 15px;
margin-bottom: 0px;
padding: 0;
}
nav ul li:first-child {
margin-left: 0;
}
nav a:hover::before
{
width: 100%;
}
nav ul li:last-child
{
margin-right: auto;
}
<header>
<div class="container" id="#home">
<nav>
<ul>
<li id="login"> <a href="#login" style="text-align: left;"> Login/Register </a> </li>
<li> <a href="#home"> Home </a></li>
<li> <a href="#about"> About </a></li>
<li> <a href="#services"> Services </a></li>
<li> <a href="#Products"> Products </a></li>
<li> <a href="#contact"> Contact Us </a></li>
<li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li>
</ul>
</nav>
</div>
</header>