'Opaque NavBar Overlapping H1 and content

Ok so figured out the first problem.... now my navbar brand isn't expanding. It seems to be stuck at one size and its added a scroll bar to accommodate. How to I get the whole navbar to move over for the brand?

.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>
htmlcssbootstrap-4navbar


Solution 1:[1]

It could easily be because you have fixed-top on the first line of your <nav>. That is absolutely fine but the very next item beneath the Nav ... Which is your <h1>... That might now need margin-top the same height in pixels as the navbar (even a few more pixels wouldn't hurt).

Do you see what's happening? fixed-top is letting the content flood underneath the navbar, adding margin to the top of <h1> will bring it all back down the page a little.

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

Alternatively add margin-bottom to the Navbar.

There also seems to be a stray </header> closing tag immediately after the Nav

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions