How one can Create a Collapsing Header Impact with Pure CSS
Collapsing headers work much like parallax effects. The background of the collapsing header stays fastened in order that the content material under it may possibly circulate on prime of it when the person scrolls down the web page. On this tutorial, we are going to present you methods to create the next collapsing header impact:
The demo consists of three elements:
A set header with black background that sits on the prime of the web page and consists of the principle menu.
A collapsing header with bluish background that comprises the additional details about the particular provide.
The remainder of the content material with white background that the person scrolls onto the collapsing header.
Collapsing headers are nice for person expertise. Customers can scroll the web page again any time after they need to see the particular data, however it doesn’t distract their consideration whereas they’re studying the remainder of the content material.
Now, let’s see methods to create a collapsing header step-by-step.
1. Create the HTML
The HTML consists of three essential sections:
for the fastened prime menu bar, .banner for the collapsing header, and .article for the remainder of the content material. Right here is how the code appears like:
Do not Miss Out On Our Subsequent Webinar
Signal Up Now and Select an Book for Free
2. Add Primary Kinds with CSS
Let’s begin the CSS by defining some reset and primary kinds, as an example:
To place the fastened menu bar on the highest of the web page, you might want to set the
aspect’s place to fastened and z-index to a worth increased than zero. As z-index defaults to auto, it solely needs to be increased than the z-index worth of the aspect’s father or mother(s). The CSS under makes use of 99, because it’s prone to keep increased than any father or mother of the aspect:
The z-index: 99; rule permits the highest menu bar to remain on prime of all components, even when the collapsing header fully collapses and the remainder of the content material reaches the highest of the web page.
4. Type the Menu
Though the next CSS guidelines aren’t essential to create the collapsing header, that is how one can model the highest menu:
The .nav and .menu objects inherit the width of the
aspect (100%) in order that they’ll additionally span throughout the complete display screen. Moreover, .menu additionally makes use of flexbox, so the menu objects can line up horizontally in a row whereas the align-items property facilities them vertically.
You too can see that we have now added the flex: 1;CSS rule to the .brand aspect. The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis. When it stands with just one worth, it refers to flex-grow, whereas the opposite two properties keep at their default worth.
When flex-grow set to 1, it implies that the given aspect will get all the additional area within the flex container. In consequence, the emblem is pushed to the left of the container whereas the menu objects keep on the proper.
5. Place the Collapsing Header
The collapsing header additionally has fastened place similar to the highest menu bar. Nonetheless, it doesn’t get a z-index worth in order that it may possibly “collapse” when the person scrolls down the web page and the remainder of the content material regularly covers the banner.
As you possibly can see, we have now used flexbox once more to align the content material contained in the collapsing header. Now, it’s a column-based flex format that permits you to simply align the weather each vertically and horizontally utilizing the justify-content and align-items properties.
6. Type the Collapsing Header
Though this isn’t a part of the collapsing header impact, both, right here is how the descendants of the .banner aspect (title, description, and button) are styled within the demo above:
On the screenshot under, you possibly can see how our demo appears like at this second. As each the highest menu bar and the collapsing header have a hard and fast place, they keep on the highest of the web page and canopy the higher a part of the content material. We’ll make the header collapsible within the subsequent step by styling the remainder of the content material.
7. Type the Remainder of the Content material
To make the header collapse on scroll, you might want to do 4 issues:
Most significantly, you might want to set a background for the remainder of the content material in order that it may possibly circulate on prime of the collapsible header. Keep in mind that this impact works much like parallax results; the totally different backgrounds have to cowl one another.
Within the demo, we have now used a plain white background. You at all times have to set a background on the flowing content material to make this impact work (in any other case the collapsing header gained’t collapse).
Place the content material relative to the 2 fastened components. The prime: 370px; rule under is the sum of the top of (70px) and .banner (300px).
Set the width to 100% in order that the content material will cowl the complete header.
Set the top to 100%, too, in order that the background will cowl the complete top of the web page (that is necessary on cell or in case of longer pages).
Collapsing headers give you a user-friendly method to present extra content material on prime of the web page. They work much like parallax results; you might want to make the totally different backgrounds transfer at totally different velocity and place the flowing content material relative to the fastened aspect(s).