CSS Sticky Header - Fixed Navigation Menu Bar on Scroll using HTML5 and CSS3

CSS Sticky Header - Fixed Navigation Menu Bar on Scroll using HTML5 and CSS3 - https://youtu.be/B4eISzWrcD4 Creating Sticky Header Navigation in CSS without using Javascript or Complex CSS Code. Make your sticky header navigation fixed at the top while scrolling your page with just two lines of CSS3 Code. I will be showing you how to create a fixed sticky header using the CSS3 position property with the 'sticky' value. I will not show how to completely create the navigation bar from scratch, however, I will show you how to turn your already existing header navigation menu to sticky navigation menu. To create our fixed header we will not use any CSS frameworks like bootstrap or foundation. We will create our sticky header in pure CSS. =======Source Code for Sticky Header Navigation======= Tutorial for Navigation Used: https://youtu.be/SPQ17nosfyg Start here: https://goo.gl/D1nN4o Finished Final Code: https://goo.gl/kW6UU9 ================================================ WHAT YOU WILL LEARN First of all, I will demonstrate what we will be creating in this tutorial, then I will explain what is sticky navigation menu and how we can create it. In the first method, I will show you how you can use CSS position fixed to create your sticky header navigation menu. Then I will discuss the cons of using fixed position in CSS for creating a fixed navigation bar. Then, I will show you a different method to create our fixed navigation menu using the relatively new sticky position property. After that, I will discuss in which browser's CSS3 sticky position is supported and I will show you the caniuse.com website so that you can look at all the supported browsers. ============Useful Tutorials============= Creating a stitched border look with css https://youtu.be/EQnfqxm7_yc Creating Multiple borders effect using CSS https://goo.gl/UbVmwR Creating Multilevel horizontal Navigation Bar using Flexbox https://goo.gl/Erkzp6 Creating Simple Responsive Horizontal Menu using CSS3 Flex https://goo.gl/8efLMN Creating a Masonry Layout Using Pure CSS3 https://goo.gl/QFNVJa Creating a Custom Select Box Element https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr How to add preloader to your web page using javascript https://goo.gl/ZugNcP ************************CONTACT************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell Thumbnail Image Credit: https://www.freepik.com/free-photo/a-tool-for-many-wooden-boards_1017094.htm