Search code examples
htmlcssnavbarbootstrap-grid

Mysterious Line above Collapsed navbar

I've created a navbar that works perfectly but seems to be styled with a mysterious black line (see the yellow arrow) that runs below the burger when the menu is collapsed. Any help in removing this would be much appreciated.

Boostrap navbar with mysterious black line

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HOW WE CAN HELP</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      .navbar {
        margin-bottom: 0;
        border-radius: 0;
        background-color: transparent; /* need to choose company colors etc. */
        color: #fff;
        padding: 0% 0;
        border: 0;
        border-color: #fff;
      }
      .navbar-brand {
        float: left;
        min-height: 55px;
        padding: 0px 3px 10px 4px;
      }
      .navbar-inverse .navbar-nav .active a, 
      .navbar-inverse .navbar-nav .active a:focus, 
      .navbar-inverse .navbar-nav .active a:hover {
        color: #fff;
        background: #fb4f14;
      }
      /* when hovering over the nav items the colour changes to off whiate #d5d5dd */
      .navbar-inverse .navbar-nav li a {
        color: #fff;
      }
      /*
      .navbar.navbar-default .navbar-collapse {
      border: none;
      box-shadow: none;
      background-color: #fb4f14;
      }
      */
    </style>
  </head>
  <body>
    <head>
      <!-- navigation bar starts here -->
      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MyNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/index.html"><img height="130%" src="/img/logo-placeholder.png"></a>
          </div>
          <div class="collapse navbar-collapse" id="MyNavbar">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="/index.html">Item 1</a></li>
              <li class="active"><a href="/pages/help.html">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </head>
  </body>
</html>

Above is my HTML and CSS. Has anyone come across this in the past?

Solution

  • When you use the .navbar-inverse, the default color will be dark. Please see the link for the inverse nav type.

    Link: Inverse Nav Bar with background color

    Your mistake is, you are defining inverse nav without bg- as shown on the link.

    Instead of inverse, please use following

    <nav class="navbar navbar-light" style="background-color: #fb4f14;">
  <!-- Navbar content -->
</nav>

    where you will get your intended nav background for #fb4f14 as background color. But the easiest solution would be using other type of nav not navbar-inverse as soon as you want custom background color.

    Your black line is not mysterious, because when you dont define any bg color for inverse, inverse will set default color as black dark color. See example of inverse nav:

    <nav class="navbar navbar-inverse "> <!-- default dark black line --->
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-inverse bg-primary"> <!-- primary color matched border line --->
  <!-- Navbar content -->
</nav>