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

Question

我为一个客户的网站做了如下的导航栏。但是刚好最后客户告诉我让这个navbar固定在顶部，显然从头开始构建一个导航栏只是为了让它固定在顶部需要花费大量的时间和精力。有什么方法可以通过修改 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>

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

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

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

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

How to make an existing navbar with position fixed?

html

css

frontend

human-computer-interface

navbar