html - Navigation Bar disappears upon window resizing -
i trying build first website, , using html5/css3, have come across issue i'm sure solved struggling.
my homepage working desired apart nav bar, when shrink window down, elements such hgroup, footer, , main sections become scrollable.
my nav bar disappears when either:
a. zoom in b. make window small enough.
is solved?
many thanks
heres html(please forgiving, i'm real newbie):
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css" type="text/css"> <title>worthworks signage</title> </head> <body> <div id="container"> <!--wrap entire document--> <header> <a href="index.html"> <img class="logo" src="images/logos/300pxbluegradient.jpg" alt="worth works signage"> </a> <hgroup> <h1><span class="bluetext">worth</span>works signage</h1> <h2>sign design – <span class="bluetext">manufacture </span>– installation – <span class="bluetext">refurbishment </span>– advice</h2> </hgroup> <nav> <!--start of navigation--> <div id='cssmenu'> <ul> <li class='active'><a href='index.html'><span>home</span></a></li> <li class='has-sub'><a href='products.html'><span>products</span></a> <!--products--> <ul> <li class='has-sub'><a href='#'><span>signs</span></a> <!--product sub #1--> <ul> <li><a href='#'><span>castings</span></a></li> <li class='last'><a href='#'><span>sub item</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>casting</span></a> <!--product sub #2--> <ul> <li><a href='#'><span>sub item</span></a></li> <li class='last'><a href='#'><span>sub item</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>site work</span></a> <!--product sub #3--> <ul> <li><a href='#'><span>sub item</span></a></li> <li class='last'><a href='#'><span>sub item</span></a></li> </ul> </li> </ul> </li> <li><a href='gallery.html'><span>gallery</span></a></li> <!--gallery--> <li><a href='testimonials.html'><span>testimonials</span></a></li> <!--testimonials--> <li><a href='contact.html'><span>contact</span></a></li> <!--contact us--> <li class='last'><a href='about.html'><span>about us</span></a></li> <!--about us--> </ul> </div> </nav> </header> <!--end of header--> <!--end of navigation--> <!-- start of section--> <div id="section-wrap"> <div id="mainimage">main image goes here</div> <div style="clear:both"></div> <div id="brochure">order <a href="brochure.html"><u>free</u></a> brochure today</div> <div id="testimonals">see our satisfied customers think..</div> </div> <!-- end of section--> <div style="clear:both"></div> <!-- start of footer--> <footer> <div id="wrap"> <div class="left footercol"> <h3 class="foothead">connect</h3> <div class="footcontent"> <ul> <li class="facebook"><a href="http://www.facebook.com/worthworkssignage">facebook</a></li> <li class="twitter"><a href="http://www.twitter.com/worthworkssigns">twitter</a></li> </ul> </div> <!--end of column content div--> </div> <!--end of footer column--> and here css3:
*{ margin: 0 auto; text-align:left; } body{ margin:0 0 300px; width: 100%; height:1200px; padding:0; font-size:13px; font-family:helvetica neue,helvetica,arial, sans-serif; color:#000000; background-color: #cccccc; } #container{ min-height:100%; border:1px solid black; position:relative; } /* header styling*/ header{ height:410px; padding:0; width:1580px; background-color:#ffffff; clear:both; } .logo{ display:inline; margin:20px; width:20%; float:left; padding:10px; } hgroup{ font-family:baker signet, gills sans light; padding-bottom:20px; } h1{ display:inline-block; font-size:100px; padding: 160px 0px 25px 10px; color:#a1a1a1; float:left; } h2{ clear:both; display:inline-block; font-size:28px; padding-left:15px; color:#a1a1a1; float:center; } .bluetext{ color:#4cb6ea; font: } /*nav bar*/ nav{ width:1580px; height:46px; position:relative; } #cssmenu { background-color: #4cb6ea; margin: 0; width: 1580px; padding: 0; line-height: 1; border-top: 3px solid #4cb6ea; display:inline-block; position: relative; font-family: hallo sans, sans-serif; } #cssmenu ul { list-style: none; margin: 0; padding: 0; display: block; width:1540px; } #cssmenu ul:after { content: ' '; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } #cssmenu ul li { margin: 0; padding: 0; display: block; position: relative; width:12%; } #cssmenu ul li { text-decoration: none; display: block; margin: 0; -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; } #cssmenu ul li ul { position: absolute; left: -9999px; top: auto; } #cssmenu ul li ul li { max-height: 0; position: absolute; -webkit-transition: max-height 0.4s ease-out; -moz-transition: max-height 0.4s ease-out; -ms-transition: max-height 0.4s ease-out; -o-transition: max-height 0.4s ease-out; transition: max-height 0.4s ease-out; background: #ffffff; } #cssmenu ul li ul li.has-sub:after { display: block; position: absolute; content: ''; height: 10px; width: 10px; border-radius: 5px; background: #000000; z-index: 1; top: 13px; right: 15px; } #cssmenu ul li ul li.has-sub:before { display: block; position: absolute; content: ''; height: 0; width: 0; border: 3px solid transparent; border-left-color: #ffffff; z-index: 2; top: 15px; right: 15px; } #cssmenu ul li ul li { font-size: 18px; font-weight: 400; text-transform: none; color: #000000; letter-spacing: 0; display: block; width: 140px; padding: 11px 10px 11px 20px; } #cssmenu ul li ul li:hover > a, #cssmenu ul li ul li.active > { color: #4cb6ea; } #cssmenu ul li ul li:hover:after, #cssmenu ul li ul li.active:after { background: #4cb6ea; } #cssmenu ul li ul li:hover > ul { left: 170px; top: 0; } #cssmenu ul li ul li:hover > ul > li { max-height: 72px; position: relative; } #cssmenu > ul > li { float: left; } #cssmenu > ul > li:after { content: ''; display: block; position: absolute; width: 100%; height: 0; top: 0; z-index: 0; background: #ffffff; -webkit-transition: height .2s; -moz-transition: height .2s; -ms-transition: height .2s; -o-transition: height .2s; transition: height .2s; } #cssmenu > ul > li.has-sub > { padding-right: 40px; } #cssmenu > ul > li.has-sub > a:after { display: block; content: ''; background: #ffffff; height: 12px; width: 12px; position: absolute; border-radius: 13px; right: 14px; top: 16px; } #cssmenu > ul > li.has-sub > a:before { display: block; content: ''; border: 4px solid transparent; border-top-color: #4cb6ea; z-index: 2; height: 0; width: 0; position: absolute; right: 16px; top: 21px; } #cssmenu > ul > li > { color: #ffffff; padding: 15px 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; z-index: 2; position: relative; } #cssmenu > ul > li:hover:after, #cssmenu > ul > li.active:after { height: 100%; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > { color: #000000; } #cssmenu > ul > li:hover > a:after, #cssmenu > ul > li.active > a:after { background: #000000; } #cssmenu > ul > li:hover > a:before, #cssmenu > ul > li.active > a:before { border-top-color: #ffffff; } #cssmenu > ul > li:hover > ul { left: 0; } #cssmenu > ul > li:hover > ul > li { max-height: 72px; position: relative; } #cssmenu #menu-button { display: none; } @media , (max-width: 768px), screen , (-webkit-min-device-pixel-ratio: 2) , (max-width: 1024px), screen , (min--moz-device-pixel-ratio: 2) , (max-width: 1024px), screen , (-o-min-device-pixel-ratio: 2/1) , (max-width: 1024px), screen , (min-device-pixel-ratio: 2) , (max-width: 1024px), screen , (min-resolution: 192dpi) , (max-width: 1024px), screen , (min-resolution: 2dppx) , (max-width: 1024px) { #cssmenu > ul { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.35s ease-out; -moz-transition: max-height 0.35s ease-out; -ms-transition: max-height 0.35s ease-out; -o-transition: max-height 0.35s ease-out; transition: max-height 0.35s ease-out; } #cssmenu > ul.open { max-height: 1000px; border-top: 1px solid rgba(110, 110, 110, 0.25); } #cssmenu ul { width: 100%; } #cssmenu ul > li { float: none; } #cssmenu ul li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 12px 20px; } #cssmenu ul > li:after { display: none; } #cssmenu ul li.has-sub > a:after, #cssmenu ul li.has-sub > a:before, #cssmenu ul li ul li.has-sub:after, #cssmenu ul li ul li.has-sub:before { display: none; } #cssmenu ul li ul, #cssmenu ul li ul li ul, #cssmenu ul li ul li:hover > ul { left: 0; position: relative; } #cssmenu ul li ul li, #cssmenu ul li:hover > ul > li { max-height: 999px; position: relative; background: none; } #cssmenu ul li ul li { padding: 8px 20px 8px 35px; color: #ffffff; width: auto; } #cssmenu ul li ul ul li { padding: 8px 20px 8px 50px; } #cssmenu ul li ul li:hover > { color: #000000; } #cssmenu #menu-button { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 15px 20px; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: 1px; color: #ffffff; cursor: pointer; } #cssmenu #menu-button:after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; right: 20px; top: 16px; } #cssmenu #menu-button:before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; right: 20px; top: 26px; } } /*main content styling*/ #section-wrap { width:1580px; height:1200px; } #mainimage { background:#fff; width:1580px; height:1000px; color:#a1a1a1; } #brochure { float:left; background:#fff; width:787px; height:342px; color:#a1a1a1; border-top: 4px solid #4cb6ea; border-right: 3px solid #4cb6ea; border-bottom: 1px solid #4cb6ea; } #testimonals { float:right; background:#fff; width:787px; height:342px; color:#a1a1a1; border-top: 4px solid #4cb6ea; border-left: 3px solid #4cb6ea; border-bottom: 1px solid #4cb6ea; }
in @media query, have following css declaration:
#cssmenu > ul {max-height: 0} this line that's hiding navigation, giving maximum height of 0px.
Comments
Post a Comment