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。