html - Responsive height to a div? -
http://shrineweb.in/other-files/clients/markalves21/responsive/html/index.html
in link above, blue navigation responsive in width, not in height. don't know doing wrong, have set min-height.
here markup:
<div id="menu"> <!--the navigation/menu--> <nav> <ul><!--un-ordered list list items , child list items if menuis have drop down--> <li><a href="index.html">home</a></li> <li><a href="aboutus.html">about us</a> <ul> <li><a href="location.html">location</a></li><!--child menu--> </ul> </li> <li><a href="contactus.html">contact us</a></li> <li>news <ul> <li><a href="clubnews.html">club news</a></li> </ul> </li> <li>the pitch <ul> <li><a href="plan.html">plan</a></li> <li><a href="location.html">location</a></li> </ul> </li> <li>teams <ul> <li><a href="under15.html">under 15</a></li> <li><a href="under16.html">under 16</a></li> <li><a href="under18.html">under 18</a></li> </ul> </li> <li>matches <ul> <li><a href="fixtures.html">fixtures</a></li> <li><a href="tables.html">tables</a></li> <li><a href="results.html">results</a></li> </ul> </li> <li>help <ul> <li><a href="askaq.html">ask question</a></li> <li><a href="faq.html">faq's</a></li> </ul> </li> </ul> </nav> </div>
and here css:
@media screen , (min-width: 1px) , (max-width: 2000px) { #header { width: 100%; } #header img { width: 100%; } #menu { color: #fff; background: #4e84fe; margin: 0px auto; width: 100%; min-height: 43px; } }
add following css properties #menu
overflow: hidden; height: auto;
note may want add thin white border around drop down or adjust shade of blue because starts blend right in second row of menu bar. option use media query convert written out menu drop down or form of mobile friendly menu small screens.
also, suggest applying these styles classes rather id's (.menu). proper way handle kind of thing.
Comments
Post a Comment