您如何在徽标旁边添加文本并将 header 保持在顶部？

Question

所以我正在尝试制作我网站的 header 部分，但我有几个问题。在我进入它们之前，我只想说我在这方面很新，所以请尽量让它简单。谢谢。好的，他们在这里：

我想让我的文字悬停在我的徽标旁边，就像您在任何其他网站上看到的那样。
当您向下滚动时，header 会跟随您，因此您不必一直向上滚动。

这是第一个问题的代码，但第二个问题我没有：

header { 
  width: 100%; 
  height: 5%; 
  background-color: #52bad5; 
  border-bottom: 1px solid #2C9AB7; 
  padding-top: 0px; 
  margin-top: 0px; 
}

<body>
<!-- Main Container -->
<div class="container"> 
  <!-- Navigation -->
  <header> <a href="">

    <img src="file_locatio_here" alt="" width="50" height="50">

    <h4 class="logo">LIGHT</h4>
    </a>
    <nav>
      <ul>
        <li><a href="#hero">HOME</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li> <a href="#contact">CONTACT</a></li>
      </ul>
    </nav>
  </header>
</div>
</body>

我希望这完全有意义。

Answer 1

要在文本旁边制作徽标，您只需将 display: flex 添加到包装纸中，如下所示。

要使 header 保持在顶部，您需要做的就是向其添加 position: sticky。

我建议在这里阅读更多关于 flexbox 的内容：

body {
  height: 200vh;
  margin: 0;
}

header {
  width: 100%;
  background-color: #52bad5;
  border-bottom: 1px solid #2C9AB7;
  position: sticky;
  top: 0;
  display: flex;
}

.wrapper {
  display: flex;
}

ul {
  display: flex;
}

li {
  padding: 0 5px;
}

<header>
  <a class="wrapper">
    <img src="file_locatio_here" width="50" height="50">
    <h4 class="logo">LIGHT</h4>
  </a>
  <nav>
    <ul>
      <li><a href="#hero">HOME</a></li>
      <li><a href="#about">ABOUT</a></li>
      <li> <a href="#contact">CONTACT</a> </li>
    </ul>
  </nav>
</header>

您如何在徽标旁边添加文本并将 header 保持在顶部？

How do you have text next to a logo and keep the header on top?

html

css

dreamweaver