基金會 - 不想隱藏導航欄的右鍵

Question

在更寬的屏幕上我的登錄按鈕是可見的，但在較小的屏幕上它是隱藏的。

JSBIN http://jsbin.com/nowubuseqeza/1/edit?html,js,output

相關代碼：

<div class="top-bar" data-topbar="" style="background:#074e68"> 
    <ul class="title-area"> 
     <li class="name"> 
      <h1><a href="/"><img class="left" src="images/pluslogo.png" style="margin:2px 1em;height:40px;width:40px" alt="Pacific Medical Training"> Pacific Medical Training</a></h1> 
     </li> 
    </ul> 

    <div class="top-bar-section"> 
     <!-- Right Nav Section --> 
     <ul class="right"> 
      <li class="active"> 
       <a href="/login/">Login</a> 
      </li> 
     </ul> 
    </div> 
</div> 

是否有可能有這個在任何情況下可見？否則，我的用戶無法登錄。

Answer 1

按下登錄按鈕的代碼更改爲這個DEMO

<div class="top-bar" data-topbar="" style="background:#074e68"> 
    <div class="top-bar-section right"> 
     <!-- Right Nav Section --> 
     <ul class="right show-for-small"> 
      <li class="active"> 
       <a href="/login/">Login</a> 
      </li> 
     </ul> 
    </div> 
    <ul class="title-area"> 
     <li class="name"> 
      <h1><a href="/"><img class="left" src="images/pluslogo.png" style="margin:2px 1em;height:40px;width:40px" alt="Pacific Medical Training"> Pacific Medical Training</a></h1> 
     </li> 
    </ul> 

    <div class="top-bar-section"> 
     <!-- Right Nav Section --> 
     <ul class="right"> 
      <li class="active"> 
       <a href="/login/">Login</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

在較小的屏幕中，標題區域和頂部條中的鏈接的許多CSS屬性都在改變。如果您添加以下，也應提請登錄按鈕回到小屏幕：

//Only use it for screens under 40.063em, using the media query 
@media only screen and (max-width: 40.063em) { 
    .top-bar .name h1 a { 
    width: auto; 
    } 
    .top-bar-section ul { 
    width: auto; 
    } 
    .top-bar-section ul li.active > a { 
    padding: 0px 15px; 
    line-height: 45px; 
    } 
    .top-bar .title-area { 
    float: left; 
    } 
} 

但是，它可能需要非常小的屏幕更多的細化，其中「太平洋醫療培訓」佔據了整個頂酒吧和向下