Fixed Navigation Bar with HTML and CSS



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.

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.

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.

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.

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.

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.

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.

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

 

styles.css

Links

YouTube Video

Code on GitHub

Live Demo

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!