Collapsing Header tutorial

This tutorial will learn how to create a simple Fixed Header or Collapsing Header with HTML and CSS. I will be using html5, css3, for this project. Previously I have shared some HTML CSS based projects. Check those out if you are fancy about it.


In this tutorial, the header will remain fixed, and the content below it will keep scrolling. I will show you this effect using some simple CSS tricks. Nowadays, lots of websites using this technique to make their website. It will also create a nice looking parallax effect while scrolling. I will suggest you follow the below tutorial to have some idea about what we will make today.



I hope you have watched the entire video and have some ideas about the project. Now, let's start with the HTML markup of this project. First, I have taken a div element named ''box-area,' which will act as the wrapper or container of the whole snippet. Then I took the header element. After that, I have taken the 'wrapper' div element, and this will act as the wrapper or container for log and nav items of the project. Then I have taken a div element called 'logo' and provide a random company name. I have also taken some nav items inside a nav element. After the header part, I have taken a div named 'banner-area' for the header text. In the end, I took a div called 'content-area' where I have taken an h2 and p tag and provided some random text there.

You may also like:

In the CSS part, first, I have eliminated the default margin and padding of the document by providing a margin and padding of zero to the universal selector. I gave the wrapper class a 1170px width and provided a margin, so the project's contents remain in the middle. I have given a height of 100px and a width of 100% to the header element. I also gave it a fixed position and z-index value to remain at the top while scrolling down the page. Then I have applied some basic CSS for styling the log and nav items. I used Poppins as the primary font for the whole project. Still, you use any google fonts of your choice. after finishing the header i gave the 'banner-area' a background image and position fixed value to cerate a simple-looking parallax effect. The rest of the styling is quite self-explanatory, and you can understand those if you have some basic idea of HTML and CSS.

Fixed header with HTML and CSS ( Source Code ):

To create this project, you must create an HTML and CSS file and copy the coding below and paste them to your project.

ADD HTML




ADD CSS 




I hope you like this exciting and straightforward snippet. Keep connected with this blog, and please follow our social media profiles. Thank you for vising the blog, and Keep visiting for snippet like this.

2 Comments

Please Do not Enter any spam link in the comment box

Post a Comment

Please Do not Enter any spam link in the comment box