Fixed header in html
Fixed header menu or top bar using html is an essential in most of the modern web pages are concerned.
To fix this header menu bar constant at particular location, implement the following css code in your html program.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
<style>
#menu1 {
position: fixed;
background-color:cyan;
right: 0;
top: 50%;
width: 15%;
}
#menu2 {
position: fixed;
background-color:yellow;
left: 0;
margin-top: -8;
width: 45%;
border-radius: 10px 10px 10px 10px;
}
#menu2:hover
{
background-color: red
}
h1{right:0; margin-top:-8; position:fixed; background-color:cyan; width: 520px; height: 60px;}
h1:hover{background-color:yellow;}
</style>
</head>
<body>
<h1 align=right>:: Fixed menu demo with CSS :: </h1>
<ul id=menu1>
<li><a href="#solid">Solid</a>
<li><a href="#web">Web</a>
<li><a href="#java">Java</a>
</ul>
<ul id=menu2>
<li><a href="#solid">Solid</a>
<li><a href="#web">Web</a>
<li><a href="#java">Java</a>
</ul>
<a name=solid><img src="d:\solid.jpg"></a> <br>
<a name=web><img src="d:\web-design.jpg"></a> <br>
<img src="d:\bing.jpg">
<a name=java><img src="d:\java-logo.jpg"> </a> <br>
<hr>
</body>
</html>
View Port : Page accommodates any screen size like PC/Tab/Mobile phone etc.
Output:
for other HTML programs, Click here
