Jekyll build bootstrap navbar

Question

I'm building a website in Jekyll (which i'm new to) and when I serve my website to my localhost, the navbar is showing up incorrectly. From all the sites I've ever used Bootstrap with, this has never happened. It seems as if the screen reader option is being chosen, but then again, I'm fairly new to Jekyll.

On the navbar, there should be the default buttons showing up on the right hand side of it with the four options.

Here's my HTML:

<header>
<nav class="navbar navbar-default navbar-fixed-top main-navbar site-header">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed navbar-menu-button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="navbar-menu">Menu</span>
        </button>
       <a class="site-title navbar-brand" href="{{ site.baseurl }}/">Web Site</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a {% if page.url contains 'about' %}class="current-page"{% endif %} href="{{site.baseurl}}/about">About</a></li>
          <li><a {% if page.url contains 'portfolio' %}class="current-page"{% endif %} href="{{site.baseurl}}/portfolio">Work</a></li>
          <li><a {% if page.url contains 'blog' %}class="current-page"{% endif %} href="{{site.baseurl}}/blog">Blog</a></li>
          <li><a {% if page.url contains 'contact' %}class="current-page"{% endif %} href="{{site.baseurl}}/contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="{{ site.baseurl }}/js/bootstrap.js"></script>
</header>

Answer 1

整个nav元素及其子元素不应位于header元素内，而应位于body元素内。