0

我为客户的网站制作了以下导航栏。但是最后客户告诉我要把这个导航栏固定在上面，显然从头开始构建一个导航栏只是为了让它固定在上面需要很多时间和精力。有什么方法可以通过修改 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>

4

2 回答 2

1

改变一些CSS

header
 {
   background: #d9c2ac;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   z-index: 99; //Change as per your requirement.
 }
于 2018-02-15T09:39:41.237 回答
1

如果对您有用，请尝试提到的更改。我认为它可以解决你的问题。

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>

于 2018-02-15T09:47:29.690 回答