How to Create a Fixed Navbar with CSS
Normally, top navigation menus disappear when the user scrolls the web page.
Fixed navigation bars are commonly used by many websites. In other words, a fixed or sticky navbar stays in place while you are scrolling the web page. They allow showing interface components regardless of where the user is on a web page.
A fixed navbar is simple to create. It requires a little HTML markup and only a few CSS properties.
In this tutorial, we will show you how to easily create a fixed navbar with the <div>, <nav> and <ul> elements.
Create HTML
- Create a <div> element with the class "navbar".
- Add <a> tags inside the <div>. With the <a> tags, we use href attribute, which is a required attribute of the <a> tag. It specifies a link on the web page or a place on the same web page, where the user navigates after clicking on the link. Give each of them an id and input the content.
- Create another <div> element in the <body> section with the class name "container".
- Write a title in the <h1> tag and place your content inside <p> tags.
<div class="navbar">
<a href="#books">Books</a>
<a href="#quizzes">Quizzes</a>
<a href="#snippets">Snippets</a>
<a href="#tools">Tools</a>
<a href="#stringfunctions">String Functions</a>
</div>
<div class="container">
<h1>here must be title</h1>
<p>Here must be your content</p>
</div>Add CSS
- Set the overflow property of the "navbar" class to "hidden" and the position to "fixed". Continue styling this class by specifying the background-color, top, and width properties.
- Style the <a> tags. Set the float property to "left" and the display to "block". Add the text-align, color, padding, text-decoration, and font-size properties.
- Give color to the :hover pseudo-class so as when you hover the text the color changes.
- Style the "container" class with the padding, margin-top, and height properties. Set the height of the container to "2000px" to enable scrolling.
.navbar {
overflow: hidden;
background-color: #666666;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #eeeeee;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
}
.navbar a:hover {
color: #1c87c9;
}
.container {
padding: 18px;
margin-top: 35px;
height: 2000px;
}Here’s the full code.
Example of creating a fixed navbar with the <div> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #666666;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #eeeeee;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
}
.navbar a:hover {
color: #1c87c9;
}
.container {
padding: 18px;
margin-top: 35px;
height: 2000px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#books">Books</a>
<a href="#quizzes">Quizzes</a>
<a href="#snippets">Snippets</a>
<a href="#tools">Tools</a>
<a href="#stringfunctions">String Functions</a>
</div>
<div class="container">
<h1>
The navbar stays in place while you are scrolling the web page.
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam ipsum, maximus eu metus ac, semper tristique neque. Suspendisse sed finibus metus, dignissim blandit lorem. Praesent ornare lectus metus, ut aliquet est suscipit et. Quisque sollicitudin, lorem a efficitur euismod, elit elit interdum est, nec vehicula tortor est ut velit. Morbi blandit consequat lectus a auctor. Nulla sed dolor auctor, congue enim vel, blandit mi. Fusce arcu augue, cursus in mollis vitae, porta non magna.
</p>
<p>
Integer condimentum id nisl in lacinia. Ut congue ante sit amet ligula scelerisque, nec gravida erat tempor. Pellentesque venenatis pulvinar aliquam. Sed consectetur dapibus faucibus. Ut volutpat eget turpis sed ultricies. Nunc ut risus sit amet tortor feugiat facilisis sit amet non dolor. Morbi elementum arcu tortor, eu vulputate sapien sollicitudin a.
</p>
<p>
Duis dapibus dui eget est pellentesque, tristique pharetra elit imperdiet. Suspendisse quis quam sed nisi sodales faucibus. Donec quis sodales ex. Etiam molestie est ac ipsum scelerisque, ut bibendum metus molestie. Mauris porttitor ullamcorper faucibus.
</p>
<p>
Integer vulputate venenatis iaculis. Vestibulum fermentum sodales lectus, in posuere lacus interdum eget. Suspendisse maximus, lectus id pellentesque molestie, mi ante placerat est, vel condimentum orci nisl vel lacus.
</p>
<p>
Duis leo diam, viverra nec nulla et, accumsan commodo mauris. Sed id sollicitudin nunc. Praesent aliquet efficitur odio eget imperdiet.
</p>
</div>
</body>
</html>Example of creating a fixed navbar with the <nav> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 0;
background-color: #f1e9e9;
}
.navbar {
overflow: hidden;
background-color: #1c87c9;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #eeeeee;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
}
.navbar a:hover {
color: #ffffff;
}
.container {
padding: 18px;
margin-top: 35px;
height: 2000px;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#books">Books</a>
<a href="#quizzes">Quizzes</a>
<a href="#snippets">Snippets</a>
<a href="#tools">Tools</a>
<a href="#stringfunctions">String Functions</a>
</nav>
<div class="container">
<h1>
The navbar stays in place while you are scrolling the web page.
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam ipsum, maximus eu metus ac, semper tristique neque. Suspendisse sed finibus metus, dignissim blandit lorem. Praesent ornare lectus metus, ut aliquet est suscipit et. Quisque sollicitudin, lorem a efficitur euismod, elit elit interdum est, nec vehicula tortor est ut velit. Morbi blandit consequat lectus a auctor. Nulla sed dolor auctor, congue enim vel, blandit mi. Fusce arcu augue, cursus in mollis vitae, porta non magna.
</p>
<p>
Integer condimentum id nisl in lacinia. Ut congue ante sit amet ligula scelerisque, nec gravida erat tempor. Pellentesque venenatis pulvinar aliquam. Sed consectetur dapibus faucibus. Ut volutpat eget turpis sed ultricies. Nunc ut risus sit amet tortor feugiat facilisis sit amet non dolor. Morbi elementum arcu tortor, eu vulputate sapien sollicitudin a.
</p>
<p>
Duis dapibus dui eget est pellentesque, tristique pharetra elit imperdiet. Suspendisse quis quam sed nisi sodales faucibus. Donec quis sodales ex. Etiam molestie est ac ipsum scelerisque, ut bibendum metus molestie. Mauris porttitor ullamcorper faucibus.
</p>
<p>
Integer vulputate venenatis iaculis. Vestibulum fermentum sodales lectus, in posuere lacus interdum eget. Suspendisse maximus, lectus id pellentesque molestie, mi ante placerat est, vel condimentum orci nisl vel lacus. Duis leo diam, viverra nec nulla et, accumsan commodo mauris. Sed id sollicitudin nunc. Praesent aliquet efficitur odio eget imperdiet.
</p>
<p>
Mauris mollis ante a velit molestie elementum. Sed sollicitudin dui diam, laoreet placerat purus laoreet ut. Duis vehicula scelerisque metus, ac interdum massa tempor sit amet. Mauris auctor ante ut turpis vulputate venenatis. Suspendisse luctus condimentum leo vitae auctor. Donec tellus urna, luctus at sollicitudin eu, cursus sit amet tellus. Donec pellentesque blandit consectetur. Ut ac velit ac sem auctor vulputate id in ex. Fusce cursus urna at aliquam sagittis. Proin sagittis risus nisi, eget euismod orci euismod id. Nullam elementum finibus tristique.
</p>
<p>
Nullam sagittis enim id laoreet ullamcorper. Duis nec dictum elit, id sollicitudin enim. Nulla sed tortor in nunc placerat semper sit amet eget justo. Maecenas consectetur ligula in nisi euismod, nec tristique arcu pulvinar. Sed ullamcorper facilisis urna, vitae sollicitudin nisi pretium vitae. Aliquam lacus lacus, auctor non suscipit sit amet, congue sed nisi. Praesent rutrum a leo eget placerat. Nunc ut enim vitae tortor ullamcorper gravida sed vel ex. Nullam sed laoreet mauris. Pellentesque quis interdum arcu. Ut vitae elit non diam congue congue at a nunc. Duis porttitor posuere urna, non tristique urna vehicula malesuada. Vestibulum scelerisque vehicula porttitor. Nam ornare fringilla ultricies. Proin molestie mi id bibendum sagittis.
</p>
</div>
</body>
</html>Example of creating a fixed navbar with the <ul> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 0;
background-color: #f1e9e9;
}
ul {
overflow: hidden;
background-color: #42cde1;
position: fixed;
top: 0;
margin: 0;
padding: 0;
width: 100%;
}
ul li {
list-style-type: none;
display: inline-block;
}
ul li a {
display: block;
color: #eeeeee;
text-align: center;
padding: 15px 30px 15px 20px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.navbar a:hover {
color: #ffffff;
}
.container {
padding: 18px;
margin-top: 35px;
height: 2000px;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#books">Books</a>
</li>
<li>
<a href="#quizzes">Quizzes</a>
</li>
<li>
<a href="#snippets">Snippets</a>
</li>
<li>
<a href="#tools">Tools</a>
</li>
<li>
<a href="#stringfunctions">String Functions</a>
</li>
</ul>
<div class="container">
<h1>
The navbar stays in place while you are scrolling the web page.
</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body>
</html>