不透明的Navbar重叠H1和内容

Question

好的，所以弄清楚了第一个问题。...现在我的Navbar品牌没有扩展。它似乎被困在一种尺寸上，并增加了一个滚动条以容纳。我如何让整个Navbar转移到该品牌？

.navbar {
  position: relative;
  display:inline-block;
  overflow: auto;
  background: #f4f4f4;
  opacity: .6;
  width: 100%;
  padding: 5px 8px;
  z-index: 9999;}

.navbar-brand {
  color:black;
  font-weight: bold;
  font-size: 300%;}

.navbar a {
  float: left;
  display: block;
  text-align: center;
  overflow: auto;
  padding: 5px 8px;}

.navbar a:hover{
  background-color:#ede2d4;}


<nav class="navbar navbar-expand-lg navbar-light fixed-top justify-content-between">
 <div class="container-fluid">
  <a class="navbar-brand" href="#">Hello</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a></li>
      <li class="nav-item">
        <a class="nav-link" href="facts.html">Facts</a></li>
      <li class="nav-item">
        <a class="nav-link" href="chart.html">Chart</a></li>
      <li class="nav-item">
        <a class="nav-link" href="video.html">Video</a></li>
      <li class="nav-item">
        <a class="nav-link" href="jokes.html">Jokes</a></li>
    </ul>
  <div>
    <form class="navbar-form navbar-left form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</div>
</div>
</nav>

<h1>Testing Page </h1>

Answer 1

这很容易是因为您在＆lt; nav＆gt;的第一行上具有固定的top。这绝对很好，但是NAV下面的下一个项目...这是您的＆lt; h1＆gt; ...现在可能需要保证金 - top相同的高度像素作为Navbar（甚至还有几个像素也不会受伤）。

你看到发生了什么事吗？ 固定的top让内容泛滥在Navbar下方，并将保证金添加到＆lt; H1＆gt;的顶部，将其全部带回到页面上。

<h1 style="margin-top:50px">Testing Page</h1>

或者，将保证底添加到NAVBAR。

似乎也有一个流浪＆lt;/header＆gt;立即关闭标签