html - Stop list from also moving/shrinking when resizing screen -
whenever resize screen, on screen stays , scroll bar appears... except horizontal list. keeps moving along screen , becoming multiple layers , messing up. there way me keep list moving? tried adding {white-space: nowrap} #primary_nav_wrap ul item. however, causes drop down under "committee" become horizontal drop down rather vertical drop down menu. there way make entire list not move , same time not cause drop down change? affect parent , not child?
here's css
#topbar{ background-color: #636363; height:2.4em; position:absolute; width:81.8em; margin: auto; top:0; } #topbar2{ background-color: #636363; height:2.4em; position:absolute; width:81.8em; margin:auto; top:10em; z-index:-1; } #title{ font-family:basic title font; color:#ffffff; position: absolute; top:-0.6em; font-size:1.6em; left:17.4em; z-index:1; white-space: nowrap;} #logo { position:absolute; top:2.6em; left:36.5em; z-index:1; width:9em; } #text {font-family:basic title font; color:#636363; position: absolute; left:8em; top:0.2em; font-size:4em; min-width:100% z-index:1;} #text2 {font-family:basic title font; color:#636363; position: absolute; left:11.6em; top:0.2em; font-size:4em; z-index:1;} body { color: #fff; font-family: 'open sans'; font-size: 1.1em; text-align: center; text-decoration:none; font-weight:100; display:inline; overflow-x:none; overflow-y: scroll; } #primary_nav_wrap { margin-top:15px z-index:100; } #primary_nav_wrap ul { list-style:none; position:absolute; float:left; margin:0; top:10em; left:7em; padding:0; text-align:center; } #primary_nav_wrap ul { display:block; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family: 'open sans'; font-weight:100; font-size: 0.9em; color: #ffffff; text-align:center; padding-top:0.3em; padding-bottom:0.3em; padding-right:4em; padding-left:4em; } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0; display: inline-block; float: none; margin: 0 -3px 0 0; } #primary_nav_wrap ul ul { display:none; position:absolute; top:100%; left:0%; text-align:left; background-color:#636363; z-index:100; } #primary_nav_wrap ul ul li { float:none; width:187px; padding-left:1em; padding-right:1em; } #primary_nav_wrap ul ul { line-height:120%; padding:10px 15px; } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { display:block } .hvr-fade { display: inline-block; vertical-align: middle; -webkit-transform: translatez(0); transform: translatez(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color; } .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { box-shadow: inset 0 2px 10px -5px #000000; background-color: #2098d1; color: white; z-index:1 } #bottomtext { position:absolute; bottom:-83%; left:43%; font-family:"myriad pro"; font-weight:300; color:black; font-size:0.8em; z-index:10000;} #bottomtext2 { position:absolute; bottom:-89%; left:44%; font-family:"myriad pro"; font-weight:200; color:black; font-size:0.6em; z-index:1000000} #bottom { width:100%; height:15%; background-color: white; position:absolute; bottom:-88%; z-index:1000; } and html
<!doctype html> <html> <head> <meta charset='utf-8'> <link rel="stylesheet" type="text/css" href="execs2.css"/> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="robots" content="all,index,follow" /> <title>kas</title> <meta name="description" content="create sticky navigation bar remains fixed top after scroll" /> </head> <body bgcolor="#f0f0f0">> <p id="title">southern taiwan model united nations</p> <p id="intro"></p> <p id="text">20 </p> <p id="text2">15 </p> <p id="bottomtext">kaohsiung american school <br> www.kas.tw </p> <p id="bottomtext2">(c) 2015 stmun press team</p> <div id="bottom"></div> <img id="logo" src="images/logo2.png"> <div id="topbar"></div> <div id="topbar2"></div> <div id="midbar2"></div> <div id="midbar3"></div> <div id="bar"></div> <div id="bar2"></div> <div id="box"></div> <div id="textbox"></div> <nav id="primary_nav_wrap"> <ul> <li class="hvr-fade" class="current-menu-item"><a href="#">home</a></li> <li class="hvr-fade" ><a href="#">introduction</a></li> <li class="hvr-fade"><a href="#">committees</a> <ul> <li class="hvr-fade"><a href="#">security council</a></li> <li class="hvr-fade"><a href="#">cdis</a></li> <li class="hvr-fade"><a href="#">ecosoc</a></li> <li class="hvr-fade"><a href="#">hrc</a></li> <li class="hvr-fade"><a href="#">general assembly 1</a></li> <li class="hvr-fade"><a href="#">general assembly 2</a></li> <li class="hvr-fade"><a href="#">general assembly 3</a></li> </ul> <li class="hvr-fade"><a href="#">contact</a></li> <li class="hvr-fade"><a href="#">news</a></li> <li class="hvr-fade"><a href="#">more</a></li> </ul> </nav> </body> </html> thanks!!
you there.
add did
#primary_nav_wrap { white-space: nowrap; .... } and add also
#primary_nav_wrap ul ul li { float:left; .... } instead of
#primary_nav_wrap ul ul li { float: none; .... } regards.
Comments
Post a Comment