html - 导航栏和标题组合

Question

我正在尝试找到一种方法，使我的导航栏和页眉标题成为彼此的一部分。换句话说，我希望标题文本位于导航栏的顶部或导航栏的一部分，并且导航和标题文本都固定在页面顶部以便滚动。我一直在玩耍，却一无所获。我不太确定如何控制它的 css 和 html。

header {
  /*insert something here?*/
}

nav {
  background-image: url("header.jpg");
  background-position: center;
  padding: 1%;
  overflow: hidden;
}

nav a {
  float: left;
  display: block;
  color: orange;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size 17px;
  font-family: helvetica;
  letter-spacing: 2px;
}

nav li,
nav ul {
  list-style: none;
}

nav a:hover {
  background-color: #ddd;
  color: black;
}

nav .material-icons {
  display: none;
  font-size: 36px;
  color: blue;
}

@media screen and (max-width: 600px) {
  nav a:not(:first-child) {
    display: none;
  }
  nav .material-icons {
    float: left;
    display: block;
  }
}

<header>
  Knox Enterprises Inc.
  <nav>
    <i class="material-icons">menu</i>
    <a href="index.html">Home</a>
    <a href="About.html">About</a>
    <a href="Contact.html">Contact</a>
  </nav>
</header>

Answer 1

我会制作 header display: flex 并使用 justify-content: space-between 来分隔它们 - 或者你可以删除它文本和导航并排在左侧，或 justify-content: center 将它们放在中间或 justify-content: flex-end 到把它们放在右边。如果更合适，将文本放在 h1 或其他元素中，然后添加 position: fixed; width: 100% 使其固定在页面顶部。

body {
  min-height: 500vh;
  background: #eee;
  margin: 0;
}
header {
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
  background: #fff;
  align-items: center;
}

nav {
  background-image: url("header.jpg");
background-position: center;
        padding: 1%;
        overflow: hidden;
 position: absolute;
  left: 0;
  top: 50%; 
  transform: translateY(-50%);
    }

 @media (max-width: 900px) {
   nav { position: static; transform: translateY(0); }
   header { justify-content: space-between; }
 }

    nav a {
        float: left;
        display: block;
        color: orange;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size 17px;
        font-family: helvetica;
        letter-spacing: 2px;
    }

    nav li, nav ul{
        list-style: none;
    }

    nav a:hover {
        background-color: #ddd;
        color: black;
    }

    nav .material-icons {
        display: none;
        font-size: 36px;
        color: blue;
    }

    @media screen and (max-width: 600px) {
      nav a:not(:first-child) {display: none;}
      nav .material-icons {
        float: left;
        display: block;
      }
    }
htmlcss

<header>

        <nav>
            <i class="material-icons">menu</i>
            <a href="index.html">Home</a>
            <a href="About.html">About</a>
            <a href="Contact.html">Contact</a>
        </nav>
        
        <h1>Knox Enterprises Inc.</h1>

    </header>