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!
clomid purchase clomid â clomid purchase online
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!
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!!
ivermectin paste for rabbits ivermectin for guinea pigs
This webb siote certainly hass aall thee informatioin I needed about this subject annd didn’t knoww who to ask.
Very informative blog post.Much thanks again. Keep writing.
Thanks again for the blog.Really looking forward to read more. Really Great.
Thanks-a-mundo for the blog.Much thanks again. Really Great.
Thanks again for the blog article.Thanks Again.
I really liked your blog post.Thanks Again. Much obliged.
Thanks a lot for the blog article.Much thanks again. Really Cool.
I needed to thank you for this great read!! I definitely enjoyed every bit of it. I have you book marked to look at new things you post…
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
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?
Im thankful for the blog.Really thank you! Fantastic.
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.
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!
This piece of writing gives clear idea designed for the new visitors of blogging, that actually how to do blogging.
Longchamp Pas Cher Why users still use to read news papers when in this technological world all is presented on net?
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
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
There’s certainly a great deal to learn about this topic. I really like all of the points you have made.
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?
chloroquine vs hydroxychloroquine chloroquine phosphate generic name
I really like and appreciate your blog post.Much thanks again. Much obliged.
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
Greetings! Very useful advice within this article! It’s the littlechanges that will make the most significant changes.Many thanks for sharing!
topical ivermectin ivermectin paste for ear mites in horses
I read this post completely concerning the comparison of newest and previous technologies, it’sawesome article.
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!
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
ivermectin over the counter canada stromectol â stromectol otc
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.
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.
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.
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.
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!
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.
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.
I appreciate, cause I found just what I used to be looking for. You’ve ended my 4 day long hunt! God Bless you man. Have a nice day. Bye
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.
generic ed pills online – online for ed pills how to get ed pills over the counter
It is really a great and useful piece of information. I am glad that you shared this useful info with us. Please keep us informed like this. Thanks for sharing.
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.
Thank you ever so for you article post.Really thank you! Fantastic.
Its great as your other content :D, regards for putting up.Have a look at my blog :: Rapid Fire Diet Keto
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?
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?
But wanna admit that this is very beneficial, Thanks for taking your time to write this.My blog post Spore Mens Vitality Mix (Elsa)
This is one awesome blog post.Much thanks again. Great.
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!
abc online pharmacy in canada canadian online pharmacies reviews
prednisone over the counter â prednisolone prednisone prednisone online sale
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.
I needed to thank you for this great read!! I certainly enjoyed every bit of it. I have got you book marked to check out new things you postĂ
Awesome blog.Really looking forward to read more. Really Great.
best ed pill over the counter ed medication â ed remedies that really work
Thank you for your article post.Really thank you! Want more.
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.
Awesome! Its in fact awesome article, I have got much clear idea about from this piece of writing.