css導航欄響應填充問題

Question

我有一個導航欄，每個東西看起來都很棒，直到它響應。底部下降一直有5 px的差距。

https://jsfiddle.net/nc2hamed/5/

我曾嘗試在

.expand { 
    max-height: 40em; 
} 

Answer 1

最大的差距是因爲你的菜單有很大的填充。 因爲你的.wrap有寬度：95％（不是100％），所以左側和右側空白處都有。 所以這個代碼將解決兩個問題：

.navbar { 
    width: 105%; 
    margin: 0 -2.5%; 
} 
@media only screen and (min-width: 800px) { 
    .navbar { 
     width: auto; 
     margin: 0; 
    } 
    .navbar .menu { 
     padding-top: 20px; 
    } 
} 

Answer 2

添加和移除填充您應該刪除一些padding-top上.navbar .menu並設置max-width到100%

@media(your_media_query) { 
    .navbar .menu { 
    padding-top: 25px; 
    } 

    .wrap { 
     width: 100%; 
     max-width: 100%; 
    } 
} 

Answer 3

你的問題是你的.navbar .menu元素。除非屏幕高度不可移動，否則您需要將padding-top設置爲0px。