在窗口調整大小重疊海誓山盟的元素

Question

在this template我已經使用Foundation構建，一切看起來正確和響應，除了兩個導航欄。他們都在自己的<div class="row">，但它們在窗口調整大小上彼此重疊。

（有一個@media only screen and (max-width: 767px)，這應該使它看起來更乾淨，如果它有幫助的話）。

Answer 1

實際上，如果您使用開發人員工具在Chrome上打開頁面，或使用Firebug在firefox中打開頁面，則可以看到當頁面寬度小於767px時，問題進入時，由於僅顯示@media屏幕和最大寬度：767px）。我會建議檢查該css的原因，如果你從html中刪除它，你會得到一個更好的結果，所以你可能會檢查該CSS內的什麼屬性讓你的div瘋狂。

Answer 2

嘗試將foundation.css（在第148行左右）.row class height改爲140px並將主鏈接移動到主內容頂部的某處？該代碼嚴重需要或高/邊緣或div塊imo :)

編輯：大致編輯foundation.css行不是你所需要的，爲特定的高度設置單獨的CSS類，並觸發它的使用正確的媒體查詢（導致問題發生的寬度）。這樣，你可以調整你喜歡的頂級導航周圍的任何類，它不漂亮，但它使事情工作。

Answer 3

由於Jorge Aguilar表示，問題在於float: none，該問題適用於每個<li>。此外，我使用width: 100%屬性來拉伸整個屏幕上的元素（就像它最初與浮動一樣，但沒有重疊）