如何在導航欄中將徽標居中並使其保持一致？

Question

我做了這個導航，但有幾個問題。

1. header pic 位於導航之后，但我希望導航位於 header 上。
2. 我希望導航同時具有粘性。 這意味着當我向下滾動時，導航以相同的方式下降並且不會改變。
3. 我怎樣才能做出最好的響應？
4. 一般來說，我怎樣才能更好地優化它？

 nav { position: absolute; margin: 1.5em 30em; display: flex; justify-content: space-between; width: 45%; height: 10vh; /* border: 3px dotted red; */ z-index: 999; }.navContainer { position: relative; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; background-color: #d6d6d6; border-radius: 10px; opacity: 0.8; /* border: 3px dotted green; */ }.navContainer a { color: #1b1b1b; }.logoContaienr img { width: 150px; height: auto; }.anmeldungsContainer { position: relative; top: 25px; height: 50px; color: #d6d6d6; border-radius: 10px; background-color: #034078; margin-left: 20px; /* border: 3px dotted blue; */ }.anmeldungsContainer li { padding-top: 0.5em; }.anmeldungsContainer a { color: #d6d6d6; } nav ul { display: flex; justify-content: space-between; list-style: none; } nav li { margin: 0 2em; text-decoration: none; } a { display: block; text-decoration: none; font-size: 1.5em; font-weight: bolder; transition: 0.3s; }

 <nav> <div class="navContainer"> <div class="linksMenuContainer"> <ul> <li><a href="#">Kurse</a></li> <li><a href="#">Ernährung</a></li> </ul> </div> <div class="logoContaienr"> <img src="../Img/Logo.png" alt=""> </div> <div class="rechtsMenuContainer"> <ul> <li><a href="#">Abos</a></li> <li><a href="#">Trainer</a></li> </ul> </div> </div> <div class="anmeldungsContainer"> <ul> <li><a href="#">Anmeldung</a></li> </ul> </div> </nav>

Answer 1

根據我對需求的理解，我對代碼進行了整體修改。

請訪問： https://codepen.io/emmeiWhite/pen/MWjXqpQ

一些重大變化：（評論的東西是我們不再需要的）

nav {
/*   position: absolute; */
/*   margin: 1.5em 30em; */
  display: flex;
  justify-content: center;
/*   width: 45%; */
  height: 50px;

  border: 3px dotted red;
/*   z-index: 999; */
  position:fixed;
  top:0;
  left:0;
  right:0;
}