基础 - 不想隐藏导航栏的右键

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

在较小的屏幕中，标题区域和顶栏中的链接正在更改许多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;
  }
}

然而，对于非常小的屏幕，可能需要更多的改进，其中太平洋医疗培训＆＃34;占据整个顶栏并按下登录按钮

Answer 2

将您的代码更改为此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>