How to fix header even though the page scrolls?
Fixing header at the top even though the page scrolls We might have come across few websites were we notice that the header is fixed even though the page is scrolled. One of the familiar site which uses that is Quora http://www.quora.com . I tried the simliar mockup of quora feed design using html & css. To fix the header at top, CSS positioning property is used as position:fixed; Fixed positioning is relative to the containing viewport of the page. No matter, the page is scrolled element will be positioned at the same position. header{ position: fixed; top:0; left:0; width: 100%; min-height: 50px; border-top: 2px solid #b92b27; border-bottom: 2px solid #ddd; } Github link: Github_page Subscribe to Creative Technocrayts and be a part of growing community. Mockup Image: