导航栏和标题组合

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>

Answer 2

您正确放置在header 文本和导航中，但是，为了使用css 轻松操作文本的位置，应将其放置在div、p 或span 内。

为了让您的标题棒滚动到页面顶部，position: fixed。使用的时候别忘了给header的父级（例如body）position: relative。

body {
  position: relative;
  padding: 0;
  margin: 0;
}

header {
  position: fixed;
  background-color: #bbc;
  display: flex;
  width: 100vw;
  height: 100px;
  line-height: 50px;
  box-sizing: border-box;
  padding: 0 16px;
  flex-direction: column;
}

main {
  padding: 16px;
  padding-top: 100px;
}

p {
  text-indent: 2em;

<header>
  <span>Knox Enterprises Inc.</span>
  <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>
<main>
  <h1>I'm trying to find out a way</h1>
  <p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
    the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
  </p>
  <p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
    the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
  </p>
  <p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
    the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
  </p>
</main>

Answer 3

header>div {
	 display:inline;
	 float:left
        /*insert something here?*/
    }

    nav {
	display:inline;
	width:auto;
        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>
        <div>Knox Enterprises Inc.</div>
		
        <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>