将默认导航栏转换为粘性/固定导航栏？

Question

我无法将普通导航栏变成粘性导航栏。当我未将位置设置为固定时，导航栏将显示并正常工作。但是，当我固定位置时，它会突然出现并显得有些呆滞，下面我将举两个例子。我的HTML和CSS也在这里：

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Arial', serif;
}

header {
  position: fixed;
}

p {
  line-height: 200px;
}

.navbaratta {
  background-color: #E9B63C;
  list-style: none;
  text-align: center;
  padding: 20px 0 20px 0;
  margin-top: 0;
}

.navbaratta>li {
  display: inline-block;
  padding-right: 70px;
  border-right: 1px solid #000;
  margin-right: 70px;
}

.navbaratta>li>a {
  text-decoration: none;
  color: #1A1A1A;
  font-weight: bold;
}

.navbaratta>li>a:hover {
  color: #474747;
}

.Logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.LogoDiv {
  background-color: #1A1A1A;
  width: 100%;
}

li.HOME {
  border-left: 1px solid #000;
  padding-left: 70px;
}

<header>
  <div class="LogoDiv">
    <img src="NavBarFinal.png" class="Logo">
  </div>
  <ul class="navbaratta">
    <li class="HOME"><a href="">HOME</a></li>
    <li><a href="">BIOGRAPHY</a></li>
    <li><a href="">CONTACT US</a></li>
    <li><a href="">PHOTO GALLERY</a></li>
  </ul>
</header>

固定位置：

没有固定位置：

Answer 1

修复div或为其设置宽度时，需要添加位置属性。我通常更喜欢第一种方法。因此，如下使用它可以解决您的问题。 您的问题是由于使用相对定位的元素（显示为块）而引起的，因此它在相对时占用父元素的宽度。因此，您不必在意它的宽度，因为它的父对象是身体。但是，当您将其更改为固定位置时，就参考而言没有任何内容，因此可以包装所有内容。通过输入left：0和right：0，可以将其拉伸到整个屏幕。您还需要在主体元素上添加一个填充顶部。否则，文本的某些部分将显示在导航栏后面。希望对您有帮助

header {
 position: fixed;
 left: 0;
 right: 0;
}

Answer 2

标头未采用完整宽度。因此，只需更新您的header CSS。

header {
  position: fixed;
  width: 100%;  // Added
}