Case Case - 1 month ago 8
HTML Question

css navbar responsive padding issue

I have a navbar every thing looks great until it goes responsive. the bottom drop down has a 5 px gap all the way around it.

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

i have tried adding and removing padding on the

.expand {
max-height: 40em;
}

Answer

The top gap is because your .menu has big padding-top. The left and right gaps are there because your .wrap has width: 95% (not 100%). So this code will fix both issues:

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