title: Custom CSS to BootStrap NavBar
body: <p>I am adding a Bootstrap navigation bar. This is my HTML: </p>
  
  <pre><code>&lt;nav class="navbar navbar-custom navbar-static-top"&gt;
            &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&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;a class="navbar-brand" href="#"&gt;Title&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;form class="navbar-form navbar-left" role="search"&gt;
                &lt;div class="form-group"&gt;
                  &lt;input type="text" class="form-control" placeholder="Search"&gt;
                &lt;/div&gt;
                &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu pull-right"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>I have this css which I got online: </p>
  
  <pre><code>  .navbar-custom {
      background-color:#229922;
      color:#ffffff;
      border-radius:0;
  }
  
  .navbar-custom .navbar-nav ul li a {
      color:#ffffff;
      padding-left:20px;
      padding-right:20px;
  }
  .navbar-custom .navbar-nav &gt; .active &gt; a, .navbar-nav &gt; .active &gt; a:hover, .navbar-nav &gt; .active &gt; a:focus {
      color: #ffffff;
      background-color:transparent;
  }
  
  .navbar-custom .navbar-nav &gt; li &gt; a:hover, .nav &gt; li &gt; a:focus {
      text-decoration: none;
      background-color: #33aa33;
  }
  
  .navbar-custom .navbar-brand {
      color:#eeeeee;
  }
  .navbar-custom .navbar-toggle {
      background-color:#eeeeee;
  }
  .navbar-custom .icon-bar {
      background-color:#33aa33;
  }
  </code></pre>
  
  <p>The problem I am having is that it is not loading my CSS. I put this css as a seperate stylesheet and linked it to my HTML page, but it still refuses to work.</p>
  
  <p>I found the CSS at <a href="http://www.bootply.com/78010" rel="nofollow noreferrer">http://www.bootply.com/78010</a></p>
  
  <p>And in his case it works perfectly, so I cannot understand why mine does not.</p>
  
  <p>Any suggestions on what I may be doing wrong?</p>
  
  <p>Thanks</p>
  
  <p><strong>Update</strong></p>
  
  <p>This is what I have in my  section:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="stylesheet" href="./css/custommenu.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
      &lt;link rel="stylesheet" href="./css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="./css/bootstrap-theme.min.css"&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Update 2</strong></p>
  
  <p>Image of File Structure:</p>
  
  <p><a href="https://i.stack.imgur.com/f5BMB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f5BMB.png" alt="enter image description here"></a></p>