height of the Navbar increase after re sizing to mobile size and resetting back again to desktop size

Question

Hi guys i have a very weird problem. If you can see my navbar when resized to mobile size and click in drop down and again make it normal desktop size there is an increase in the navbar height. I wanted a horizontal justified menu for this i used

.menu_container>ul:after{
content: "";
padding-left: 100%;
visibility: hidden;
/* do not use float:left but the display:inline-block below!!! */
display: inline-block;
}

If I removed the content:"", it works fine but the justification of the menu goes off

This is my fiddle

Also attached screenshot for your reference

Answer 1

DEMO

Its because of height: auto; present in

#hidden_menu_collapser:checked + ul {
height: auto;
min-height: 40px;
max-height: 2999px;
background-color: 
#FFF;
}

You need update the height:auto; to height: 44px !important; and update it in desktop media query, so that that extra space is removed.

    @media only screen and (min-width: 768px) {
     #hidden_menu_collapser:checked + ul {
       min-height: 40px;
       max-height: 2999px;
       background-color: #FFF;
       height: 44px !important;
    }
   }

You can just copy paste the above css to your file and it will work