In this post we learn how to create a fixed navigation bar using HTML and CSS for our website. The fixed navigation bar will stay fixed to the top of our website even when the user scrolls down on the page.
Step 1: Create The Fixed Navigation Bar
The fixed bar will consist of three divs. Here is what our HTML will look like.
<div class="fixed-navigation-bar">
<div class="nav-bar-container">
<div class="options-container">
LOGIN | MENU
</div>
</div>
</div>
The first key css style on the fixed navigation bar div, is position:fixed. This will always keep our bar fixed so it will not move, even when the user scrolls the page. Next, with top:0px, we tell the navigation bar to always stay at the top of the screen. Then, we set height:50px and width to 100% so the fixed navigation bar will always be the full width of the browser. So, these styles place our navigation bar at the top of the page, give it a height of 50px, width of 100% of the browser, and fix the position so it does not move. Also, we give our fixed navigation bar a background color of black with a little opacity of 0.8 so we can see through it when the page scrolls.
.fixed-navigation-bar {
height: 50px;
position: fixed;
top: 0px;
width: 100%;
background: rgba( 1, 1, 1, 0.8 );
}
The first inner div, nav-bar-container, will max out at 800px. If the browser is larger than 800px, this div will be 800px and centered on the webpage inside of our fixed-navigation-bar div which is always 100% of the browser. The margin: 0 auto will center our content with a set width. We also set this to the same height as the container fixed-navigation-bar div.
.nav-bar-container {
height: 50px;
max-width: 800px;
margin: 0 auto;
}
The options-container div is where we place the actual content of our fixed navigation bar such as buttons, logos, and so on. We will float this left so our options are in the top left of the navigation bar. Give the font a color of white, enlarge the font to 24px, and give our div padding of 10px.
.options-container {
float: right;
color: #fff;
font-size: 24px;
padding: 10px;
}
Step 2: Create Content
In order to see the fixed navigation bar work, we need enough content our our page to make the page scroll able. This HTML will go below our fixed-navigation-bar div. We will create a site-content div and an inner content-centered div.
<div class="site-content">
<div class="content-centered">
CONTENT GOES HERE PUT ENOUGH CONTENT HERE
TO MAKE THE WEBPAGE SCROLL!! LOTS AND LOTS OF CONTENT!!
</div>
</div>
The site content div needs one key css style, margin-top:50px. Because our fixed navigation bar will always take up the first 50px, at the top of our website, we need to always start the content, 50px from the top of the page.
.site-content {
margin-top: 50px;
}
The inner div, content-centered, will also need the same treatment as our .nav-bar-container div in the fixed navigation bar. This will max the content-centered div out at 800px and always keep it centered.
.content-centered {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
Step 2: Create Content
Putting it all together, here is the full HTML and CSS for the fixed navigation bar. I have added a lot of content so our page scrolls and added a few extra css styles just to make the page look nice and clean 😀
index.php
<!DOCTYPE html> <html> <head> <!-- title of our page --> <title>Fixed Navigation Bar with HTML and CSS</title> <!-- need this so everything looks good on mobile devices --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- include our styles --> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <!-- this is the fixed navigation bar --> <div class="fixed-navigation-bar"> <div class="nav-bar-container"> <div class="options-container"> LOGIN | MENU </div> </div> </div> <!-- this is our site content that scrolls --> <div class="site-content"> <div class="content-centered"> <div class="section"> <div class="section-padding"> <h2>Fixed Navigation Bar with HTML and CSS!</h2> <p> This webpage is an example of how to create a fixed navigation bar with HTML and CSS. The fixed navigation bar will stick to the top of the webpage on desktop and mobile devices when the webpage is scrolled down. This webpage is an example of how to create a fixed navigation bar with HTML and CSS. The fixed navigation bar will stick to the top of the webpage on desktop and mobile devices when the webpage is scrolled down. This webpage is an example of how to create a fixed navigation bar with HTML and CSS. The fixed navigation bar will stick to the top of the webpage on desktop and mobile devices when the webpage is scrolled down. This webpage is an example of how to create a fixed navigation bar with HTML and CSS. The fixed navigation bar will stick to the top of the webpage on desktop and mobile devices when the webpage is scrolled down. This webpage is an example of how to create a fixed navigation bar with HTML and CSS. The fixed navigation bar will stick to the top of the webpage on desktop and mobile devices when the webpage is scrolled down. </p> </div> </div> <div class="section"> <div class="section-padding"> <h2>Scroll Down!</h2> <p> If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! </p> </div> </div> <div class="section"> <div class="section-padding"> <h2>Scroll Down!</h2> <p> If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! </p> </div> </div> <div class="section"> <div class="section-padding"> <h2>Scroll Down!</h2> <p> If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! </p> </div> </div> <div class="section"> <div class="section-padding"> <h2>Scroll Down!</h2> <p> If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! </p> </div> </div> <div class="section"> <div class="section-padding"> <h2>Scroll Down!</h2> <p> If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! </p> </div> </div> <div class="section"> <div class="section-padding"> <h2>Scroll Down!</h2> <p> If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! </p> </div> </div> <div class="section"> <div class="section-padding"> <h2>Scroll Down!</h2> <p> If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! </p> </div> </div> <div class="section"> <div class="section-padding"> <h2>Scroll Down!</h2> <p> If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! </p> </div> </div> <div class="section"> <div class="section-padding"> <h2>Scroll Down!</h2> <p> If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! </p> </div> </div> <div class="section"> <div class="section-padding"> <h2>Scroll Down!</h2> <p> If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! If you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! </p> </div> </div> </div> </div> </body> </html>
styles.css
@charset "utf-8";
body {
margin: 0px;
padding: 0px;
font-family: 'Helvetica', 'Arial', 'sans-serif';
font-size: 12px;
background: #ADD8E6;
padding-bottom: 10px;
}
.fixed-navigation-bar {
height: 50px;
position: fixed;
top: 0px;
width: 100%;
background: rgba( 1, 1, 1, 0.8 );
}
.site-content {
margin-top: 50px;
}
.nav-bar-container {
width: 100%;
height: 50px;
max-width: 800px;
margin: 0 auto;
}
.options-container {
float: right;
color: #fff;
font-size: 24px;
padding: 10px;
}
@media ( min-width: 800px ) { /* screen greater than 800px */
.content-centered {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
}
@media ( max-width: 800px ) { /* screen less than 800px */
.content-centered {
padding-left: 10px;
padding-right: 10px;
}
}
.section {
margin-top: 10px;
background: #fff;
display: inline-block;
width: 100%;
}
.section-padding {
padding: 10px;
}
Links
The full code example can be found in the GitHub link above along with a live demo! The video tutorial for this can also be found in the YouTube link above. That is going to do it for this post! Leave any comments/questions/concerns below and thanks for stopping by the blog!