title: Dropdown box appearing incorrectly on GitHub Pages built with Jekyll
body: <p>My GitHub Pages site built using Jekyll is not showing my navbar correctly when pushed to GitHub. When built locally using 'jekyll serve' it functions correctly as shown:</p>
  
  <p><a href="https://i.stack.imgur.com/zDbFn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zDbFn.jpg" alt="Correct Navbar"></a></p>
  
  <p>However when pushed to github the title is not visible and it seems the links are displayed above the dropdown boxes:</p>
  
  <p><a href="https://i.stack.imgur.com/r5TRS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r5TRS.jpg" alt="Incorrect Navbar"></a></p>
  
  <p>Locally I have Jekyll 3.4.3 which is the same as listed on github, and previously my site displayed normally (the same locally as online) but after a few months hiatus I can't seem to get it to display correctly again. I'm not very experienced with Jekyll as this is my first experiment with it but I do have some other web development experience.</p>
  
  <p>Any advice would be greatly appreciated.</p>
  
  <p>navbar.html</p>
  
  <pre><code>&lt;div class="navbar navbar-fixed-top"&gt;
  &lt;div class="navbar-inner"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&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;!--            &lt;form class="navbar-search pull-right" 
  action="http://google.com/search" method="get"&gt;
  {% if site.safe %}
              &lt;input type="hidden" name="q" value="site:{{ site.url | remove_first:'http://' }}"&gt;
  {% else %}
              &lt;input type="hidden" name="q" value="site:{{ site.url | domain_name }}"&gt;
  {% endif %}
              &lt;input type="text" name="q" class="input-medium search-query" placeholder="Search"&gt;
          &lt;/form&gt; --&gt;
          &lt;div class="nav-collapse collapse"&gt;
              &lt;ul class="nav"&gt;
  {% for node in site.navbar_list %}
  {% if node.name == page.group %}{% assign active = 'active' %}
  {% else %}{% assign active = nil %}{% endif %}
  {% if node.dropdown %}
                  &lt;li class="dropdown dropdown-container {{ active }}"&gt;
                      &lt;a class="dropdown-link" href="{{ site.baseurl }}{{ node.link }}"&gt;{{ node.name }}&lt;/a&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;{{ node.name }}&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
      {% for sub in node.dropdown %}
                          &lt;li&gt;&lt;a href="{{ site.baseurl }}{{ sub.link }}"&gt;{{ sub.name }}&lt;/a&gt;&lt;/li&gt;
      {% endfor %}
                      &lt;/ul&gt;
                  &lt;/li&gt;
  {% else %}
                  &lt;li class="{{ active }}"&gt;
                      &lt;a href="{{ site.baseurl }}{{ node.link }}"&gt;{{ node.name }}&lt;/a&gt;
                  &lt;/li&gt;
  {% endif %}
  {% endfor %}
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Style.css</p>
  
  <pre><code>/* title of the site */
  #header {
      height: 80px;
  }
  #header hgroup {
      position: absolute;
      top: 10px;
      left: 20px;
  }
  #header h1 {
      margin: 0;
      font-size: 1.75em;
      font-weight: bold;
  }
  #header h2 {
      color: #ccc;
      margin: 0 0 4px 16px;
      line-height: 0.8;
      font-size: 1.0em;
      font-weight: normal;
  }
  #header a,
  #header a:hover,
  #header a:visited {
      text-decoration: none;
  }
  
  /* header.html: navbar */
  .navbar-fixed-top {
      margin-bottom: 20px;
      position: static;
  }
  .navbar-fixed-top .navbar-inner {
      padding: 0;
      border-top: 1px solid #d4d4d4;
      border-bottom: 1px solid #d4d4d4;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
  }
  .navbar .nav &gt; .active &gt; a,
  .navbar .nav &gt; .active &gt; a:hover,
  .navbar .nav &gt; .active &gt; a:focus {
      box-shadow: none;
  }
  .navbar .btn-navbar {
      margin-bottom: 5px;
  }
  .lt-ie9 .collapse {
      overflow: visible; /* removed from 2.1.1, but still IE need this */
  }
  
  /* header.html: dropdown container */
  .navbar .nav &gt; li.dropdown-container {
      position: relative !important;
  }
  .navbar .nav &gt; li.dropdown-container .dropdown-link {
      position: absolute !important;
      top: 0;
      left: 0;
      z-index: 1;
  }
  .navbar .nav &gt; li.dropdown-container .caret {
      margin-left: 1.5em;
  }
  .navbar .nav &gt; li.dropdown-container .dropdown-link + .dropdown-toggle {
      z-index: 0;
  }
  </code></pre>