HOW TO CREATE A COLLAPSING HEADER EFFECT WITH PURE CSS
Collapsing headers work similar to parallax effects. The background of the collapsing header stays fixed so that the content below it can flow on top of it when the user scrolls down the page. In this tutorial, we will show you how to create the following collapsing header effect:
The demo consists of three parts:
- A fixed header with black background that sits at the top of the page and includes the main menu.
- A collapsing header with bluish background that contains the extra information about the special offer.
- The rest of the content with white background that the user scrolls onto the collapsing header.
Collapsing headers are great for user experience. Users can scroll the page back any time when they want to see the special information, but it doesn’t distract their attention while they are reading the rest of the content.
Now, let’s see how to create a collapsing header step by step.
1. CREATE THE HTML
The HTML consists of three main sections: <header> for the fixed top menu bar, .banner for the collapsing header, and .article for the rest of the content. Here is how the code looks like:
2. ADD BASIC STYLES WITH CSS
Let’s start the CSS by defining some reset and basic styles, for instance:
3. POSITION THE TOP MENU BAR
To position the fixed menu bar on the top of the page, you need to set the <header> element’s position to fixed and z-index to a value higher than zero. As z-index defaults to auto, it only has to be higher than the z-index value of the element’s parent(s). The CSS below uses 99, as it’s likely to stay higher than any parent of the <header> element:
The z-index: 99; rule allows the top menu bar to stay on top of all elements, even when the collapsing header completely collapses and the rest of the content reaches the top of the page.
4. STYLE THE MENU
Although the following CSS rules are not necessary to create the collapsing header, this is how you can style the top menu:
The .nav and .menu items inherit the width of the <header> element (100%) so that they can also span across the entire screen. Besides, .menu also makes use of flexbox, so the menu items can line up horizontally in a row while the align-items property centers them vertically.
You can also see that we have added the flex: 1; CSS rule to the .logo element. The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis. When it stands with only one value, it refers to flex-grow, while the other two properties stay at their default value.
When flex-grow set to 1, it means that the given element gets all the extra space in the flex container. As a result, the logo is pushed to the left of the container while the menu items stay on the right.
5. POSITION THE COLLAPSING HEADER
The collapsing header also has fixed position just like the top menu bar. However, it doesn’t get a z-index value so that it can “collapse” when the user scrolls down the page and the rest of the content gradually covers the banner.
As you can see, we have used flexbox again to align the content inside the collapsing header. Now, it’s a column-based flex layout that allows you to easily align the elements both vertically and horizontally using the justify-content and align-items properties.
6. STYLE THE COLLAPSING HEADER
Although this is not part of the collapsing header effect, either, here is how the descendants of the .banner element (title, description, and button) are styled in the demo above:
On the screenshot below, you can see how our demo looks like at this moment. As both the top menu bar and the collapsing header have a fixed position, they stay on the top of the page and cover the upper part of the content. We will make the header collapsible in the next step by styling the rest of the content.
7. STYLE THE REST OF THE CONTENT
To make the header collapse on scroll, you need to do four things:
- Most importantly, you need to set a background for the rest of the content so that it can flow on top of the collapsible header. Remember that this effect works similar to parallax effects; the different backgrounds need to cover each other.
- In the demo, we have used a plain white background. You always need to set a background on the flowing content to make this effect work (otherwise the collapsing header won’t collapse).
- Position the content relative to the two fixed elements. The top: 370px; rule below is the sum of the height of <header> (70px) and .banner (300px).
- Set the width to 100% so that the content will cover the entire header.
- Set the height to 100%, too, so that the background will cover the entire height of the page (this is important on mobile or in case of longer pages).
This is how it looks like in code:
CHECK OUT THE ENTIRE CODE
And, the collapsing header is done. Below, you can have a look at the entire CSS. You can also check out the live demo of the collapsing header effect shown in this article.
Collapsing headers provide you with a user-friendly way to show additional content on top of the page. They work similar to parallax effects; you need to make the different backgrounds move at different speed and position the flowing content relative to the fixed element(s).
Read More-: https://cronosasia.com/web-design-dev/terraform-vs-cloudformation-comparing-the-two-infrastructure-as-code-offerings-2022/