如何使位置固定的现有导航栏？

Question

我为客户的网站制作了以下导航栏。但就在最后，客户告诉我要将此导航栏固定在顶部，显然，从头开始构建导航栏需要花费大量的时间和精力才能使其固定在最顶层。有什么方法可以通过修改CSS来使我现有的导航栏固定在顶部吗？

HTML：

＆＃13;

＆＃13;

   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;
    }

＆＃13;

    <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> 

＆＃13;

＆＃13;

＆＃13;

Answer 1

更改一些css

header
 {
   background: #d9c2ac;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   z-index: 99; //Change as per your requirement.
 }

Answer 2

如果它适合您，请尝试提及的更改。我认为它可以解决你的问题。

CSS 和 的 HTML

＆＃13;

＆＃13;

body
{
    margin: 0;
    background: #222;
    font-weight: 300;
    background-image: url('bg.jpeg');

}

header
{
    background: #d9c2ac;
    position: fixed; //Add this
    top: 0;//Add this
    left: 0;//Add this
    z-index: 1000;//Add this
    width: 100%;//Add this
}
  
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;
}
//Add this property to your content div
#content {
    position: relative;
    padding-top: 55px; // Height of your navbar
    background-color: white;
}

＆＃13;

<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> 

<div id="content">Your body content here</div>

＆＃13;

＆＃13;

＆＃13;