Home / Developpement / How to Create a Collapsing Header Effect with Pure CSS

How to Create a Collapsing Header Effect with Pure CSS

How one can Create a Collapsing Header Impact with Pure CSS

Collapsing headers are a wonderful resolution to point out necessary data to customers, corresponding to particular provides and key notifications. Many builders depend on JavaScript after they create such results, nevertheless, it’s completely doable to create an easier collapsing header impact with pure CSS, too.

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:

  1. A set header with black background that sits on the prime of the web page and consists of the principle menu.
  2. A collapsing header with bluish background that comprises the additional details about the particular provide.
  3. 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:

 

...

2. Add Primary Kinds with CSS

Let’s begin the CSS by defining some reset and primary kinds, as an example:

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	coloration: #222;
}
a {
	text-decoration: none;
}
ul {
	list-style-type: none;
}

3. Place the Prime Menu Bar

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:

header {
	top: 70px;
	background: #222;
	place: fastened;
	width: 100%;
	z-index: 99;
}

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:

nav {
	top: inherit;
}
.menu {
	show: flex;
	top: inherit;
	align-items: middle;
	padding: 0 20px;
}
.menu li {
	padding: 0 10px;
}
.menu a {
	coloration: white;
}
.brand {
	flex: 1;
	font-size: 22px;
}

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.

.banner {
	/* for positioning */
	width: 100%;
	top: 300px;
	place: fastened;
	prime: 70px;
	background: linear-gradient(45deg, #98cbff, #98ffcb);

	/* for content material alignment */
	show: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: middle;
}

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:

.banner-title {
	font-size: 32px;
	margin-bottom: 10px;
	text-align: middle;
}
.banner-desc {
	font-size: 22px;
	text-align: middle;
}
.btn-signup {
	coloration: white;
	background-color: #0056ab;
	border: 0;
	padding: 15px 25px;
	font-size: 16px;
	cursor: pointer;
}

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:

  1. 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).
  2. 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).
  3. Set the width to 100% in order that the content material will cowl the complete header.
  4. 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).

That is the way it appears like in code:

.article {
	width: 100%;
	place: relative;
	prime: 370px; 
	background: white;
	top: 100%; 
	padding: 30px 10%;
}
.article p {
	margin-bottom: 20px;
}

Verify Out the Total Code

And, the collapsing header is completed. Under, you possibly can take a look on the total CSS. You too can try the dwell demo of the collapsing header effect proven on this article.

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	coloration: #222;
}
a {
	text-decoration: none;
}
ul {
	list-style-type: none;
}
header {
	top: 70px;
	background: #222;
	place: fastened;
	width: 100%;
	z-index: 99;
}
nav {
	top: inherit;
}
.menu {
	show: flex;
	top: inherit;
	align-items: middle;
	padding: 0 20px;
}
.menu li {
	padding: 0 10px;
}
.menu a {
	coloration: white;
}
.brand {
	flex: 1;
	font-size: 22px;
}
.banner {
	/* for positioning */
	width: 100%;
	top: 300px;
	place: fastened;
	prime: 70px;
	background: linear-gradient(45deg, #98cbff, #98ffcb);

	/* for content material alignment */
	show: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: middle;
}
.banner-title {
	font-size: 32px;
	margin-bottom: 10px;
	text-align: middle;
}
.banner-desc {
	font-size: 22px;
	text-align: middle;
}
.btn-signup {
	coloration: white;
	background-color: #0056ab;
	border: 0;
	padding: 15px 25px;
	font-size: 16px;
	cursor: pointer;
}
.article {
	width: 100%;
	place: relative;
	prime: 370px; 
	background: white;
	top: 100%; 
	padding: 30px 10%;
}
.article p {
	margin-bottom: 20px;
}

Conclusion

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).

There are numerous attention-grabbing CSS results that can provide an additional contact to your design. If you wish to see extra, try our assortment of six frequently used effects which are often applied with JavaScript however are completely doable with CSS as effectively.

Check Also

7 Finest Materials Design UI Part Libraries

7 Finest Materials Design UI Part Libraries Materials design is a well-liked visible design system …

Leave a Reply

Your email address will not be published. Required fields are marked *