粘性导航栏问题

Question

我正在尝试制作一个粘性导航栏，但是当我这样做时 position: fixed 它移动我的导航并将其合并到左上角。标志应该在左边，导航在右边

该网站 https://nexusdevelopment.netlify.app 如果你想看看我在说什么

navigation

    <nav class="navbar navbar-expand-lg navbar-dark">
      <div class="container">
        <p class="navbar-brand" style="color:  black; font-family: Balsamiq Sans, cursive;"><strong> <img src="media/img/Logos/Nexus Development Logo.png" class="logo">Nexus Development</strong></p>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" style="color: black;font-family: monospace;" href="./index.html"><strong>Home</strong>
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" style="color:  black; font-family: monospace;" href="./news.html"><strong>News</strong></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" style="color:  black; font-family: monospace; " href="./signin.html"><strong>Sign-in</strong></a>
            </li>
             <li class="nav-item">
              <a class="nav-link" style="color:  black; font-family: monospace; " href="./store.html"><strong>Store</strong></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <h1 class="heroh1">Nexus Development<span class="herospan">- Where Dreams Come True -</span></h1>
  </div>

css

body {
  /* background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
 */
 background-color: white;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  font-family: "Balsamiq Sans", cursive;
 
}

.navbar {
  postion: fixed;
}
a:hover {
color: white;
text-decoration: none;
}
a:link {
 color:  black;
}
a:visited {
  border: 2px solid black;
  color: white;
}
a:hover, a:active {
background-color: white;
color: white;
text-decoration: none;
}

.btn {
  color: black;
  background-color: white;
  border: white;
}

.btn:hover {
  background-color: white;
  color: black;
  border: white;
}
  footer {
    position: bottom;
    width: 100%;
    padding: 10px;
    left: 0;
    bottom: 0;
    color: black;
    text-align: center;
    clear: both;
  }


  @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300);
* {
    margin: 0;
    padding: 0;
}
.hero {
    height: 100vh;
    background: linear-gradient(45deg, rgba(255,175,189,.7), rgba(100,216,243,.7), rgba(234,236,198,.7), rgba(245,146,176,.7), rgba(52,219,216,.7)) 0 0 / 1000% no-repeat, url(https://picsum.photos/g/2000/1200?image=443) 0 0 / cover no-repeat;
    -webkit-animation: gradientAnimation 40s ease infinite;
    animation: gradientAnimation 40s ease infinite;
}
@-webkit-keyframes gradientAnimation {
    0%   { background-position: 0% 30%, 0 0;}
    50%  { background-position: 100% 70%, 0 0;}
    100% { background-position: 0% 30%, 0 0;}
}
@keyframes gradientAnimation {
    0%   { background-position: 0% 30%, 0 0;}
    50%  { background-position: 100% 70%, 0 0;}
    100% { background-position: 0% 30%, 0 0;}
}
.heroh1 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font : normal 600 72px/1 'Open Sans', sans-serif;
    text-align: center;
    white-space: nowrap;
}
.heroh1 .herospan {
    display: block;
    margin-top: 1em;
    font-size: 40px;
    font-weight: 300;
}

.logo {
  width: 75px;
  height: 75px;
  padding: 10px; 
}

Answer 1

查看您的实时站点，将 .navbar 属性更改为：

position: relative;
display: flex;
..etc

收件人：

position: sticky;
display: flex;
top: 0;
left: 0;
z-index: 10;

z-index 是因为您没有背景色，所以通过设置它可以确保导航始终悬停在您的内容上。如果您最终在其后面放置了背景色，您仍然可以将 z-index 保留在那里，以确保它移动到您的其余内容之上。让我知道这是否能让您到达您想去的地方，如果没有，我们将进一步解决问题。 :)

粘性导航栏问题

Sticky Nav Bar Issues

html

css

navigation

nav

navbar