HTML CSS examples for CSS Widget:Nav Bar
Navbar heading stay in place
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #navbar ul {<!--from w w w. j av a 2s.c o m--> margin:0 auto; padding:11px; list-style-type:none; text-align:center; background:Chartreuse; } #navbar ul li { display:inline; } #navbar ul li a { font-family:calibri; font-size:large; text-decoration:underline; font-weight:201; border:0.6px solid yellow; border-radius:3px; padding:.4em 2em; color:blue; background-color:pink; } #navbar ul li a:hover { color:OrangeRed; background-color:grey; border-radius:6px; color:BlueViolet; } #navbar { position:fixed; margin-top:0; top:0; left:0; width:100%; z-index:0; } #navbar { overflow:hidden; } #navbar h1 { float:left; margin:0; } </style> </head> <body> <div id="navbar"> <h1>Lorem</h1> <ul> <li> <a href="#">Lorem</a> </li> <li> <a href="#">Lorem ipsu</a> </li> <li> <a href="#">Lorem</a> </li> <li> <a href="#">Lorem</a> </li> <li> <a href="#">Lorem</a> </li> </ul> </div> </body> </html>