Fixed Navigation Bar with HTML and CSS

Posted on by justinstolpe



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

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!

 

159 comments

  2. I like the valuable information you supply on your articles. I will bookmark your blog and test once more right here regularly. I’m reasonably certain I’ll be informed many new stuff right right here! Best of luck for the next!

  3. An interesting discussion is definitely worth comment. There’s no doubt that that you need to publish more on this topic, it may not be a taboo matter but typically people don’t speak about such subjects. To the next! Best wishes!!

  13. Thank yyou a bunch forr sharing tis with all people you really recognize whyat
    youu arre speaking approximately! Bookmarked. Please aso vixit
    myy websaite =). We couldd have a hyperkink exchang agreeent among us

  14. Thanks , I’ve recently been searching for info about this topic for ages and yours is the greatest I’ve discovered so far. But, what about the bottom line? Are you sure about the source?

  16. Great post. I was checking constantly this blog and I’m impressed! Very useful info specially the last part 🙂 I care for such info a lot. I was seeking this particular information for a very long time. Thank you and best of luck.

  17. Howdy! I could have sworn I’ve been to thhis log before but after reading threough
    some oof the pos I realized it’s neew to me. Nonetheless, I’m defnitely
    happ I found itt andd I’ll bbe book-marking annd chnecking back frequently!

  20. Terrific post but I was wanting to know if you could write alitte more on this topic? I’d be very thankful if you could elaboratea little bit more. Thank you!my blog post – new.mtas.ru

  21. That is a really good tip particularly to those fresh to the blogosphere.Brief but very precise information… Thanks for sharing this one.A must read post!my blog :: Légalisation Malte

  23. Thank you, I have just been looking for information approximately this subject for a long time and yours is the best I have found out so far. But, what about the conclusion? Are you sure in regards to the supply?

  26. I stay at home and look after the children comprar flomax He is easily bruised emotionally and sensitive to any form of criticism, blame or shame

  30. When someone writes an article he/she maintainsthe plan of a user in his/her mind that how a user can know it.So that’s why this paragraph is amazing. Thanks!

  31. Asking questions are really good thing if you are not understanding something entirely, howeverthis post offers good understanding yet.My blog post: Cool Portable Air Conditioner

  33. Have you ever thought about creating an ebook or guest authoring on other sites? I have a blog based upon on the same subjects you discuss and would love to have you share some stories/information. I know my readers would appreciate your work. If you are even remotely interested, feel free to send me an email.

  34. Have you ever thought about creating an e-book or guest authoring on other blogs? I have a blog centered on the same information you discuss and would love to have you share some stories/information. I know my audience would enjoy your work. If you are even remotely interested, feel free to shoot me an email.

  35. I have learn a few excellent stuff here. Certainly value bookmarking for revisiting. I wonder how so much effort you set to create this sort of wonderful informative site.

  36. My spouse and I stumbled over here different website and thought I may as well check things out. I like what I see so i am just following you. Look forward to looking over your web page again.

  37. Hi there, just became alert to your blog through Google, and found that it is really informative. I am going to watch out for brussels. I will appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers!

  38. Heya i’m for the first time here. I came across this board and I find It really useful & it helped me out much. I hope to give something back and aid others like you aided me.

  39. Thank you for another excellent post. Where else could anyone get that kind of info in such a perfect way of writing? I’ve a presentation next week, and I’m on the look for such info.

  41. Its such as you learn my thoughts! You appear to know so much about this, like you wrote the book in it or something. I believe that you could do with some percent to pressure the message home a little bit, however other than that, this is great blog. An excellent read. I will definitely be back.

  44. Its like you learn my thoughts! You seem to grasp so much about this, such as you wrote the book in it or something. I feel that you simply could do with some percent to pressure the message home a bit, but instead of that, that is excellent blog. An excellent read. I’ll definitely be back.

  47. I’ve been absent for a while, but now I remember why I used to love this site. Thanks , I will try and check back more frequently. How frequently you update your website?

  48. I am curious to find out what blog system you are using? I’m having some minor security issues with my latest blog and I’d like to find something more safe. Do you have any solutions?

  51. Hi there! This article couldnít be written much better! Looking through this post reminds me of my previous roommate! He always kept preaching about this. I’ll forward this article to him. Pretty sure he’ll have a good read. Thank you for sharing!

  54. Attractive section of content. I just stumbled upon your blog and in accession capitalto assert that I get in fact enjoyed account your blog posts.Anyway I’ll be subscribing to your feeds and even I achievement youaccess consistently fast.

  59. Hmm is anyone else experiencing problems with the imageson this blog loading? I’m trying to determine if its a prkblem on my end oorif it’s the blog. Any responses would be greatly appreciated.

  68. Hello.This article was really interesting, especially since I was looking for thoughts on this matter last Sunday.My blog post … Arctic Air Pure Chill Portable Air Conditioner

  78. Hello my loved one! I want to say that this article is awesome,great written and come with approximately all significant infos.I’d like to peer extra posts like this .

  85. I don’t even know how I ended up here, but I thought this post was good.I don’t know who you are but certainly you’re going to a famous blogger if you are not already 😉 Cheers!

  88. Hi there! This post could not be written any better! Reading this post reminds me of my old room mate! He always kept chatting about this. I will forward this write-up to him. Fairly certain he will have a good read. Thanks for sharing!

  89. Aw, this was a very good post. Taking the time and actual effort to make a great articleÖ but what can I sayÖ I put things off a whole lot and don’t manage to get anything done.

  92. I do accept as true with all the ideas you’ve introduced on your post. They are really convincing and will definitely work. Still, the posts are very short for newbies. May you please extend them a bit from next time? Thank you for the post.

  95. Right now it sounds like Drupal is the top blogging platform available right now. (from what I’ve read) Is that what you are using on your blog?

  97. Hello there! I could have sworn Iíve been to this blog before but after browsing through many of the articles I realized itís new to me. Anyways, Iím certainly pleased I stumbled upon it and Iíll be book-marking it and checking back regularly!

  99. A fascinating discussion is worth comment. I think that you should write more about this issue, it may not be a taboo subject but generally folks don’t speak about such issues. To the next! Best wishes!!

  103. Your style is unique in comparison to other people I have read stuff from. Thank you for posting when you’ve got the opportunity, Guess I will just bookmark this blog.

  105. I’m truly enjoying the design and layout of your blog.It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Didyou hire out a developer to create your theme? Fantastic work!

  107. Aw, this was a very nice post. In idea I would like to put in writing like this additionally – taking time and actual effort to make a very good article… but what can I say… I procrastinate alot and on no account appear to get something done.

  108. Only a smiling visitor here to share the love (:, btw great layout. « He profits most who serves best. » by Arthur F. Sheldon.

  110. This unique blog is really cool and besides informative. I have chosen many interesting advices out of this blog. I ad love to come back over and over again. Thanks!

  112. Hey there ps4 games.I found your blog using msn. This is a very well written article.I’ll make sure to bookmark it and return to read more of your useful information. Thanks for the post.I will certainly comeback.

  123. Hi there! I just want to offer you a huge thumbs upfor the excellent info you’ve got right here on this post.I will be coming back to your blog for more soon.

  125. That is a really good tip particularly to those new to the blogosphere.Brief but very precise info… Many thanks for sharing this one.A must read post!

  139. Greetings! I know this is somewhat off topic but I was wondering if you knew where I could find a captcha plugin formy comment form? I’m using the same blog platform as yours and I’m having trouble findingone? Thanks a lot!

  144. Excellent way of describing, and fastidious piece of writing to take facts on thetopic of my presentation subject, which i am going to deliver in institution of highereducation.

  151. I’m extremely impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you modify it yourself? Anyway keep up the excellent quality writing, it’s rare to see a great blog like this one nowadays..

Leave a Reply

Your email address will not be published. Required fields are marked *