GitHubで誤って表示されるドロップダウンボックス

Question

GitHubにプッシュすると、Jekyllを使用して作成したGitHubページのサイトが正しく表示されません。示すように、それが正しく機能「ジキル奉仕」を使用してローカルで構築された場合：

タイトルをGitHubのためにプッシュされたときにしかし表示されていない、リンクがドロップダウンボックスの上に表示されているようだ：

ローカル私はGithubに掲載されているものと同じで、以前は自分のサイトが正常に表示されていましたが（オンラインでは同じですが）、数ヶ月の休憩の後、正しく表示されないようです再び。私はそれが私の最初の実験ですが、私はいくつかの他のWeb開発の経験を持っているので、私はジキルにはあま​​り経験がありません。

アドバイスをいただければ幸いです。あなたの問題を解決するために

navbar.html

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container-fluid"> 
     <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
<!--   <form class="navbar-search pull-right" 
action="http://google.com/search" method="get"> 
{% if site.safe %} 
      <input type="hidden" name="q" value="site:{{ site.url | remove_first:'http://' }}"> 
{% else %} 
      <input type="hidden" name="q" value="site:{{ site.url | domain_name }}"> 
{% endif %} 
      <input type="text" name="q" class="input-medium search-query" placeholder="Search"> 
     </form> --> 
     <div class="nav-collapse collapse"> 
      <ul class="nav"> 
{% for node in site.navbar_list %} 
{% if node.name == page.group %}{% assign active = 'active' %} 
{% else %}{% assign active = nil %}{% endif %} 
{% if node.dropdown %} 
       <li class="dropdown dropdown-container {{ active }}"> 
        <a class="dropdown-link" href="{{ site.baseurl }}{{ node.link }}">{{ node.name }}</a> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ node.name }}<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
    {% for sub in node.dropdown %} 
         <li><a href="{{ site.baseurl }}{{ sub.link }}">{{ sub.name }}</a></li> 
    {% endfor %} 
        </ul> 
       </li> 
{% else %} 
       <li class="{{ active }}"> 
        <a href="{{ site.baseurl }}{{ node.link }}">{{ node.name }}</a> 
       </li> 
{% endif %} 
{% endfor %} 
      </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
</div> 

のstyle.css

/* 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 > .active > a, 
.navbar .nav > .active > a:hover, 
.navbar .nav > .active > 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 > li.dropdown-container { 
    position: relative !important; 
} 
.navbar .nav > li.dropdown-container .dropdown-link { 
    position: absolute !important; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 
.navbar .nav > li.dropdown-container .caret { 
    margin-left: 1.5em; 
} 
.navbar .nav > li.dropdown-container .dropdown-link + .dropdown-toggle { 
    z-index: 0; 
} 

Answer 1

ますので、あなたが（assets\cssに_includes\cssからstyle.cssファイルをコピーして、site.cssに名前を変更する必要があります既にstyle.cssがassets\cssフォルダにあります）、リンクを追加する必要があります_includes\head.htmlに以下のように：

{% endcase %} 
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/site.css"> 
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css"> 

<!-- Font Awesome -->