html - How to keep the last nav item to always stay in line? -
i'm confused, why collapses when window shrinks horizontally? i've tried set width of div , tried setting display:block
. i'm using bootstrap 3, don't think relevant.
h1 { font-family: 'latobold'; color: #ff990f; } /*---------------------------------- header ----------------------------*/ #header { position: relative; margin-bottom: 1em; min-width: 100ex; white-space: nowrap; } #header > .inner { height: 95px; } /* njnavbar ************************************/ #header .njnavbar { position: absolute; bottom: 0px; right: 0px; height: 42px; min-width: 90ex; white-space: nowrap; } #header .njnavbar * { font-family: 'latoblack', arial, verdana, sans-serif; font-size: 16px; color: #fff; text-transform: uppercase; text-shadow: #08121b 0px 1px 1px; } #header .njnavbar ul { margin-right: 15ex; } #header .njnavbar ul li { float: left; line-height: 42px; margin: 0 10px; list-style: none; } #header .njnavbar ul li.last { margin-right: 0!important; } #header .njnavbar > ul > li > a:hover { color: #e5ca38; } /* phone number ************************************/ #header .phone { position: absolute; top: 1ex; margin-top: .5ex; right: 10px; padding-left: 30px; height: 26px; line-height: 26px; font-size: 18px; } #header .phone strong { font-family: 'latoblack'; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags --> <title>example.com</title> <!-- bootstrap --> <link href="./assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/fonts.css" type="text/css" /> <link rel="stylesheet" href="assets/css/login.css" type="text/css" /> </head> <body> <div id="header"><div class="inner"> <h1>example.com</h1> <div class="phone"> reservations call <strong>888-555-1212</strong> | <strong>888-555-1213</strong> </div> <div class="njnavbar" style="min-width:90ex"> <ul> <li><a href="index.html">home</a></li> <li><a href="about.html">about</a></li> <li><a href="services.html">services</a></li> <li><a href="longer_asdfchoiceasd.html">longer choiceasdf</a></li> <li><a href="#">customers</a></li> <li class="last"><a href="contact.html">contact</a></li> </ul> </div> <!-- /njnavbar --> </div></div> <!-- /inner /#header --> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="./assets/bootstrap/js/bootstrap.min.js"></script> </body> </html>
problem seems related float
property.
#header .njnavbar ul li { float: left; /*remove this*/ display: inline-block; /*add this*/ }
then white-space: nowrap;
on parent container start work properly.
also aware of ex
units, it's used, unless know you're doing.
Comments
Post a Comment