將nav導入爲響應的問題

Question

我正在嘗試使我的導航欄在移動設備上看起來很好，並且它能夠很快響應。然而，現在通過手機看起來很糟糕，並且所有的事情都在一起。無論如何，我可以讓這看起來更好，而不會使鏈接變得很小？

請通過手機看它在一個頁面我提出了給大家在這裏看到..

sundayfundayleague.com/show_nav.php

出於某種原因，在我創建的頁面，所有的這些鏈接都沒有顯示在導航欄..

<li> 
       <a href="selection.php">Draft Selection</a> 
      </li> 
     </ul> 
    </div> 
    <div class="nav_right"> 
     <ul> 
      <li> 
       <a href="progfile.php?user=<?php echo escape($user->data()->username); ?>"><?php echo escape($user->data()->username); ?></a> 
      </li> 
      <li> 
       <a href="messages.php">Messages</a> 
      </li> 
      <li> 
       <a href="dashboard.php">Admin</a> 
      </li> 
      <li> 
       <a href="logout.php">Log Out</a> 
      </li> 
     </ul> 
    </div> 

通常它只會壓縮所有的鏈接，它看起來可怕。

我該怎麼做才能讓所有的東西都顯現出來，並讓它看起來不錯？

這是頁眉/導航欄我的媒體查詢...

.spectator_header { 
    position: relative; 
    height: 200px; 
} 
.spectator_nav { 
    height: 75px; 
    background-color: #800000; 
    left: 2%; 
    display: inline; 
    bottom: 0; 
    position: absolute; 
    width: 95%; 
    font-size: .7em; 
    font-style: Helvetica; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 15px 15px 0px 0px; 
    border-radius: 15px 15px 0px 0px; 
    -webkit-box-shadow: 0px 0px 16px #C0C0C0; 
    -moz-box-shadow: 0px 0px 16px #C0C0C0; 
    box-shadow: 0px 0px 16px #C0C0C0; 
} 
.spectator_nav li a { 
    text-decoration: none; 
    display: block; 
} 
.spectator_nav li:hover ul { 
    display: block; 
} 
.spectator_nav ul { 
    padding: 0px; 
} 
.spectator_nav li { 
    position: relative; 
    float: left; 
    list-style-type: none; 
    padding: 25px 4px; 
} 
.spectator_nav li:first-child { 
    margin-left: 5px; 
} 
.spectator_nav li:last-child { 
    margin-right: 5px; 
} 
.spectator_nav ul:after { 
    content: "."; 
    display: block; 
    height: 0px; 
    clear: both; 
    visibility: hidden; 
} 

Answer 1

移動導航是非常棘手的，有很多的方式來處理它。我建議您查看一些資源，如This Is Responsive或CSS-Tricks，以瞭解如何解決此問題的一些想法。有很多選擇，所以找到一個適合你的。

不是所有的鏈接都顯示的原因是因爲最後一個正在打破一個新的路線。由於容器的固定高度爲75px，並且<li>周圍有很多填充物，因此您無法在第二行看到鏈接。這就是爲什麼移動導航很棘手的一個原因，當你有太多的鏈接來輕鬆地適應水平線時，你必須決定如何處理它。

你想讓你的導航成長爲多行，或切換到漢堡或選擇菜單？你是否想在一條線上塞滿所有鏈接？您是否需要允許添加更多導航鏈接或將來更改字體大小或重量？這會增加導航列表的長度並影響您想採取的方法。如果你有更多的信息，我可以指出你一個很好的解決方案，但如果你的問題只是「我如何使這種響應？」那麼你首先需要提出更多的問題。