title: How to extend the background color of a bootstrap navbar brand without affecting the navbar's height
body: <p>How to extend the background color of bootstrap navbar to the background header image brand without affecting the height of the navbar? Also the color of the font turned black. I tried to override it with the font color of white in my css file but nothing changed.</p>
  
  <p>Here's how I want it to look like:</p>
  
  <p><a href="https://i.stack.imgur.com/r7qx8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r7qx8.png" alt="enter image description here"></a></p>
  
  <p>This is taken from a psd file.
  And this is how it looks like from my attempt converting it to html/css:</p>
  
  <p><a href="https://i.stack.imgur.com/1mcv3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1mcv3.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Fonts --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"&gt;
      &lt;!-- CSS --&gt;
      &lt;link rel="stylesheet" href="css/main.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;header class="pimg1"&gt;
        &lt;nav class="navbar navbar-default"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-toggle" aria-expanded="false"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse" id="nav-toggle"&gt;
          &lt;ul class="nav navbar-nav navbar-center"&gt;
            &lt;li&gt;&lt;a href="#Home" class="nav-link home"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#Services" class="nav-link"&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a name="Home" class="nav-link navbar-brand"&gt;Logo&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#Portfolio" class="nav-link"&gt;Menu&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#Contact" class="nav-link"&gt;Career&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#Contact" class="nav-link"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS Code</strong></p>
  
  <pre><code>   body, html {
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color: #000009; 
  }
  
  .border-bottom, .section-two .waffle-border hr, .section-two .b-container hr, .section-three hr {
    width: 5%;
    border-bottom: 5px solid #f41313;
    border: 0;
    border-top: 3px solid #f41313;
   }
  
  .navbar-default {
    background: #FFFFFF; 
  }
  
  .navbar-default .navbar-brand {
    color: #000009; }
  
  .navbar-nav {
    width: 100%;
    text-align: center; }
    .navbar-nav &gt; li {
      float: none;
      display: inline-block; 
  }
  
  .navbar-toggle .icon-bar {
    background-color: black; 
  }
  
  .navbar .navbar-nav &gt; li &gt; a {
    color: #000009;
    line-height: 3rem; 
  }
  
  .navbar-brand {
    font-size: 2.5rem;
    color: #FFFFFF;
    font-family: "Permanent Marker", cursive;
    background-color: #8B1015;
    height: 8.125rem; 
  }
  
  .navbar-default .navbar-toggle {
    border-color: #FFFFFF;
   }
  
  .pimg, .pimg1 {
    position: relative;
    opacity: 0.80;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100%; }
  
  .ptext {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 4rem;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-family: "Permanent Marker", cursive; 
  }
  
  .pimg1 {
    background-image: url(../imgs/bg-header2.jpg);
    opacity: 0.90; 
  }
  </code></pre>
  
  <p>Sorry for the messy code, I'm using SASS.</p>