{"id":221,"date":"2019-02-15T18:14:11","date_gmt":"2019-02-16T00:14:11","guid":{"rendered":"https:\/\/justinstolpe.com\/blog\/?p=221"},"modified":"2019-02-15T18:55:15","modified_gmt":"2019-02-16T00:55:15","slug":"fixed-navigation-bar-with-html-and-css","status":"publish","type":"post","link":"https:\/\/justinstolpe.com\/blog\/2019\/02\/15\/fixed-navigation-bar-with-html-and-css\/","title":{"rendered":"Fixed Navigation Bar with HTML and CSS"},"content":{"rendered":"<p><center><br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/6yNEpZ58Te8\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><br \/>\nIn 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.<\/p>\n<h3><strong>Step 1: Create The Fixed Navigation Bar<br \/>\n<\/strong><\/h3>\n<p>The fixed bar will consist of three divs. Here is what our HTML will look like.<\/p>\n<pre class=\"lang:default decode:true\" title=\"Fixed Navigation Bar HTML\">&lt;div class=\"fixed-navigation-bar\"&gt;\r\n    &lt;div class=\"nav-bar-container\"&gt;\r\n        &lt;div class=\"options-container\"&gt;\r\n\t        LOGIN | MENU\r\n\t    &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>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.<\/p>\n<pre class=\"lang:css decode:true\" title=\".fixed-navigation-bar\">.fixed-navigation-bar {\r\n    height: 50px;\r\n    position: fixed;\r\n    top: 0px;\r\n    width: 100%;\r\n    background: rgba( 1, 1, 1, 0.8 ); \r\n}\r\n<\/pre>\n<p>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.<\/p>\n<pre class=\"lang:css decode:true\" title=\".nav-bar-container\">.nav-bar-container {\r\n    height: 50px;\r\n    max-width: 800px;\r\n    margin: 0 auto;\r\n}<\/pre>\n<p>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.<\/p>\n<pre class=\"lang:css decode:true\" title=\".options-container\">.options-container {\r\n    float: right;\r\n    color: #fff;\r\n    font-size: 24px;\r\n    padding: 10px;\r\n}<\/pre>\n<h3><strong>Step 2: Create Content<br \/>\n<\/strong><\/h3>\n<p>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.<\/p>\n<pre class=\"lang:default decode:true\" title=\"Site Content HTML\">&lt;div class=\"site-content\"&gt;\r\n    &lt;div class=\"content-centered\"&gt;\r\n        CONTENT GOES HERE PUT ENOUGH CONTENT HERE \r\n        TO MAKE THE WEBPAGE SCROLL!! LOTS AND LOTS OF CONTENT!!\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>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.<\/p>\n<pre class=\"lang:css decode:true \" title=\".site-content\">.site-content {\r\n    margin-top: 50px;\r\n}<\/pre>\n<p>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.<\/p>\n<pre class=\"lang:css decode:true \" title=\".content-centered\">.content-centered {\r\n    width: 100%;\r\n    max-width: 800px;\r\n    margin: 0 auto;\r\n}<\/pre>\n<h3><strong>Step 2: Create Content<\/strong><\/h3>\n<p>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 \ud83d\ude00<\/p>\n<p><strong>index.php<\/strong><\/p>\n<pre class=\"lang:default decode:true \" title=\"index.php\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\t&lt;head&gt;\r\n\t\t&lt;!-- title of our page --&gt;\r\n\t\t&lt;title&gt;Fixed Navigation Bar with HTML and CSS&lt;\/title&gt;\r\n\r\n\t\t&lt;!-- need this so everything looks good on mobile devices --&gt;\r\n\t\t&lt;meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\" \/&gt;\r\n\r\n\t\t&lt;!-- include our styles --&gt;\r\n\t\t&lt;link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\"&gt;\r\n\t&lt;\/head&gt;\r\n\t&lt;body&gt;\r\n\t\t&lt;!-- this is the fixed navigation bar --&gt;\r\n\t\t&lt;div class=\"fixed-navigation-bar\"&gt;\r\n\t\t\t&lt;div class=\"nav-bar-container\"&gt;\r\n\t\t\t\t&lt;div class=\"options-container\"&gt;\r\n\t\t\t\t\tLOGIN | MENU\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t&lt;\/div&gt;\r\n\r\n\t\t&lt;!-- this is our site content that scrolls --&gt;\r\n\t\t&lt;div class=\"site-content\"&gt;\r\n\t\t\t&lt;div class=\"content-centered\"&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Fixed Navigation Bar with HTML and CSS!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tThis 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.\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Scroll Down!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Scroll Down!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Scroll Down!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Scroll Down!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Scroll Down!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Scroll Down!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Scroll Down!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Scroll Down!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Scroll Down!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;div class=\"section\"&gt;\r\n\t\t\t\t\t&lt;div class=\"section-padding\"&gt;\r\n\t\t\t\t\t\t&lt;h2&gt;Scroll Down!&lt;\/h2&gt;\r\n\t\t\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page! \r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t\tIf you scroll down, you will notice the fixed navigation bar stays fixed to the top of the page!\r\n\t\t\t\t\t\t&lt;\/p&gt;\r\n\t\t\t\t\t&lt;\/div&gt;\r\n\t\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t&lt;\/div&gt;\r\n\t&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>styles.css<\/strong><\/p>\n<pre class=\"lang:css decode:true \" title=\"styles.css\">@charset \"utf-8\";\r\n\r\nbody {\r\n    margin: 0px;\r\n    padding: 0px;\r\n    font-family: 'Helvetica', 'Arial', 'sans-serif';\r\n    font-size: 12px;\r\n    background: #ADD8E6;\r\n    padding-bottom: 10px;\r\n}\r\n\r\n.fixed-navigation-bar {\r\n    height: 50px;\r\n    position: fixed;\r\n    top: 0px;\r\n    width: 100%;\r\n    background: rgba( 1, 1, 1, 0.8 ); \r\n}\r\n\r\n.site-content {\r\n    margin-top: 50px;\r\n}\r\n\r\n.nav-bar-container {\r\n    width: 100%;\r\n    height: 50px;\r\n    max-width: 800px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.options-container {\r\n    float: right;\r\n    color: #fff;\r\n    font-size: 24px;\r\n    padding: 10px;\r\n}\r\n\r\n@media ( min-width: 800px ) { \/* screen greater than 800px *\/\r\n    .content-centered {\r\n        width: 100%;\r\n\tmax-width: 800px;\r\n\tmargin: 0 auto;\r\n    }\r\n}\r\n\r\n@media ( max-width: 800px ) { \/* screen less than 800px *\/\r\n    .content-centered {\r\n \tpadding-left: 10px;\r\n\tpadding-right: 10px;\r\n    }\r\n}\r\n\r\n.section {\r\n    margin-top: 10px;\r\n    background: #fff;\r\n    display: inline-block;\r\n    width: 100%;\r\n}\r\n\r\n.section-padding {\r\n    padding: 10px;\r\n}<\/pre>\n<p style=\"text-align: center;\"><strong>Links<\/strong><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=6yNEpZ58Te8&amp;t=7s\" target=\"_blank\" rel=\"noopener\"><strong>YouTube Video<\/strong><\/a><\/p>\n<p><strong><a href=\"https:\/\/github.com\/jstolpe\/blog_code\/tree\/master\/fixed_navigation_bar\" target=\"_blank\" rel=\"noopener\">Code on GitHub<\/a><\/strong><\/p>\n<p><strong><a href=\"https:\/\/www.justinstolpe.com\/blog_code\/fixed_navigation_bar\/\" target=\"_blank\" rel=\"noopener\">Live Demo<\/a><\/strong><\/p>\n<p>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!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/justinstolpe.com\/blog\/2019\/02\/15\/fixed-navigation-bar-with-html-and-css\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Fixed Navigation Bar with HTML and CSS&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":222,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,11,10],"tags":[7,15,13],"class_list":["post-221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-css","category-html","tag-coding","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":6,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"predecessor-version":[{"id":228,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/221\/revisions\/228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/media\/222"}],"wp:attachment":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}