HTML CSS examples for CSS Widget:Header
Connect header image to navbar
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!--from w w w .j a v a 2s. co m--> position: relative; height: 100%; } body { height: 100%; margin: 0 0 100px; padding-top: 70px; background-color: lightblue; } #wrapper { width: 100%; overflow: hidden; } #container { width: 100%; margin: 0 auto; } .banner-img { width: 100%; position: fixed; top: 51px; } .overflow { padding-top: 100px; } ul.nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } ul.nav-right { float:right; list-style-type:none; } li.nav { float: left; } li.nav a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } </style> </head> <body> <div id="wrapper"> <div id="container"> <a> <img class="banner-img" src="https://www.java2s.com/style/demo/Firefox.png"> </a> </div> </div> <ul class="nav"> <li class="nav"> <a class="active" href="">Home</a> </li> <li class="nav"> <a href="">News</a> </li> <li class="nav"> <a href="">Contact</a> </li> <ul class="nav-right"> <li class="nav"> <a href="">About</a> </li> </ul> </ul> <div class="overflow"> <ul> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> <li>For overflow</li> </ul> </div> </body> </html>