html fixed header Archives - https://mitindia.in/tag/html-fixed-header/ Wed, 18 Jan 2017 11:38:06 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://mitindia.in/wp-content/uploads/2023/03/cropped-android-chrome-512x512-1-32x32.png html fixed header Archives - https://mitindia.in/tag/html-fixed-header/ 32 32 fixed top bar using html https://mitindia.in/fixed-top-bar-using-html/ Tue, 17 Jan 2017 10:17:59 +0000 http://www.mitindia.in/?p=718 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; […]

The post fixed top bar using html appeared first on .

]]> 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:

fixed header in html

for other HTML programs, Click here

 

Share

The post fixed top bar using html appeared first on .

]]>