How to create fixed menu with CSS?
The menu is used to navigate the pages in the websites. The menu can be placed horizontally at the top of the page or vertically as a side menu. The fixed menu is those which remain fixed on the viewport.
It does not change its position on page scroll. In this tutorial, we will be learning about the CSS properties used to create a fixed menu.
Fixed menu with CSS
To create a fixed menu use position:fixed property. To fix it at the top use top: 0. We can add margins to avoid overlay to other contents. Let's create a horizontal navigation menu and style it with some CSS properties.
Example: Creating a fixed menu with CSS
In this example, we have created a menu that is fixed at the top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.navbar {
overflow: hidden;
background-color: green;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
font-size: 20px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.container {
margin-top: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">Study Material</a>
<a href="#">Contact</a>
</div>
<div class="container">
<h2> Fixed Menu </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
<h2> Scroll here </h2>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Creating a fixed left side Menu
Here, we have used position: fixed and left:0 to create fixed left side menu.
Conclusion
In this tutorial, we have created a fixed menu using CSS properties. We used the position:fixed to fix the menu. We can use top , bottom, left and right property to fix at particular position.
