Prevent Logo On Top of Content in Bootstrap 3.2-CodePudding

I'm not a designer by any means, so that's why I'm here. I placed a logo in a div above the main navigation div on my site. It looks fine, until I scale down to a mobile size, then the logo is somehow on top of all the content in the site when I start scrolling down. I've tried using different classes for the 1st div class="navbar-inner" div, but nothing I do will keep the logo where it should be.

Please note: I do not want the logo to remain on the screen, I'm fine with scrolling to the content and both navigations, including their content, to disappear.

.navbar-fixed-top2 {
  padding-left: 0;
  padding-right: 0;
  max-height: 340px;
  margin-top: 60px
}

.navbar {
  border-bottom: unset !important;
  margin-bottom: unset !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner" role="banner">
    <div class="container">
      <a href="" target="_blank" title="Redirect to main website" class="navbar-brand">
        <img src="https://via.placeholder.com/80" alt="logo" />
      </a>
    </div>
  </div>
</div>
<div class="navbar navbar-inverse navbar-fixed-top2" role="navigation">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="link" class="navbar-brand" title="Redirect to website">Link</a></li>
        <li><a href="/" title="Redirect to home">Home</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <span>Hello!</span>
        </li>
      </ul>
    </div>
  </div>
</div>

Here is the jsfiddle which shows my issue and complete css: https://jsfiddle.net/jamiedewitz/f85qwvms/23/

Can someone help me figure out how to keep the logo in the header, so it can disappear with the navbars like it's supposed to?

UPDATE:

I changed the 2 navbar divs to use navbar-static-top and took out the padding-top from the body and it's working perfectly! Thank you all!

working divs

CodePudding user response：

The position of the navbar is set to fixed because you used .navbar-FIXED-top class (which means it will stay there even when scrolling).

.navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
}

You need to use the NON-FIXED version of navbar or add css position: static; (or relative if you want to offset it later) to the elements...

CodePudding user response：

Try using another navbar from bootstrap that doesn't include the fixed class, same goes for the navbar with your logo as well as the second navbar.

Maybe you're looking for something like shown in the snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#" target="_blank" title="Redirect to main website">
        <img src="https://via.placeholder.com/80" alt="logo" />
    </a>
</nav>
    <div class="navbar navbar-inverse" role="navigation">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="link" class="navbar-brand" title="Redirect to website">Link</a></li>
        <li><a href="/" title="Redirect to home">Home</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <span>Hello!</span>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="container body-content" id="main-content">
        <br />
        <div class="content" role="main">
          <form action="/Home/Save" method="post">
            <p><h1>Opt Out Form</h1></p>
            <p><h2>Select the term(s) you want to opt out of, then click Save.</h2></p>
            <table class="table table-striped table-bordered">
                <tr>
                    <th class="text-center" width="50%">Term</th>
                    <th class="text-center" width="50%">Status</th>
                </tr>
                <tr id="2021/08/23">
                   <td>2021 Fall Term</td>
                   <td>
                       <label id="User5StatusInLabel" for="User5StatusInRadioButton">
                           IN
                           <input type="radio" checked="checked" disabled="disabled" value="IN" />
                       </label>
                       <label id="User5StatusOutLabel" for="User5StatusOutRadioButton">
                           OUT
                          <input type="radio" disabled="disabled" value="OUT" />
                       </label> 
                  </td>
                 </tr>
            </table>
            <input type="submit" disabled="disabled" value="Save" class="btn btn-primary" />
          </form>
      </div>
      <hr />
      <footer id="footer">
        <p>&copy; 2021 - Company Name</p>
      </footer>
    </div>

</body>
</html>