Example code of how to create a collapsed header effect using only CSS

Collapsed headers are a great solution for displaying important information to users, such as special offers and key announcements. Many developers rely on JavaScript when creating this type of effect, however, it is entirely possible to create a simpler collapsed header effect using pure CSS.

The collapsed header works similar to the parallax effect. The background of the collapsed header remains fixed so that the content below it can flow over it as the user scrolls down the page. In this tutorial, we'll show you how to create the following collapsed title effects:

This presentation consists of three parts:

1. A fixed header with a black background at the top of the page containing the main menu.
2. Collapsed header with blue background containing additional information about the special offer.
3. The user scrolls to the rest of the content with a white background of the collapsed header.

Collapsing headers are great for user experience. Users can scroll anytime they want to see special information, but it won’t distract them while reading the rest of the content.

Now, let's see how to create a folding header step by step.

1. Create HTML

HTML consists of three main parts:

Used for the fixed top menu bar, .banner is the folded header, and .article is used for the rest of the content. Here is how the code looks like:

 <div class="container"> 
        <header>
            <nav>
                <ul class="menu">
                    <li class="logo"><a href="#">Dev & Design</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div class="banner">
            <div>
                <h2 class="banner-title">Don't Miss Out On Our Next Webinar</h2>
                <p class="banner-desc">Sign Up Now and Choose an Ebook for Free</p>
            </div>
            <button class="btn-signup" type="button" onclick="location.href='#'">
                   Go to Webinars »
            </button>
        </div>
        <article class="article">
            <p>...</p>
        </article>
    </div>

2. Add basic styles using CSS

Let's start our CSS by defining some reset and base styles, for example:

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

3. Place the top menu bar

To position the fixed menu bar at the top of the page, you need to

The element's position is set to fixed and the z-index is set to a value greater than zero. Since z-index defaults to auto, it just needs to be a z-index value higher than the element's parent. The following CSS uses 99 because it will likely stay above

Any parent of the element:

header {
	height: 70px;
	background: #222;
	position: fixed;
	width: 100%;
	z-index: 99;
}

The z-index: 99; rule allows the top menu bar to stay on top of all elements even when the collapsible header is fully collapsed and the rest of the content reaches the top of the page.

4. Set the menu style

While the following CSS rules are not required to create a collapsed header, you can style it with a top menu:

nav {
	height: inherit;
}
.menu {
	display: flex;
	height: inherit;
	align-items: center;
	padding: 0 20px;
}
.menu li {
	padding: 0 10px;
}
.menu a {
	color: white;
}
.logo {
	flex: 1;
	font-size: 22px;
}

.nav and menu item inheritance

(100%) width so that they also span the entire screen.

Additionally, .menu uses flexbox so the menu items can line up horizontally, and the align-items property centers them vertically.

You can also see that we added the flex: 1; CSS rule to the .logo element. The flext property is a shorthand for flex-grow, flex-shrink, and flex-basis. When it has only one value, it refers to flex-grow, while the other two properties remain at their default values.

When flex-grow is set to 1, it means that the given element gets all the extra space in the flex container. So the menu element is pushed to the left side of the container while the menu items remain on the right.

5. Place the folded title

The folded header also has a 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.

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

	/* for content alignment */
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

As you can see, we use flexbox again to align the content inside the collapsed header. Now, it is a column-based flex layout, allowing you to easily align elements vertically and horizontally using the justify-content and align-items properties.

6. Set the style of the folded title

While this isn't part of the collapsed header effect, here's how the descendants of the .banner element (title, description, and button) are styled in the demo above:

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

In the screenshot below, you can see what our demo looks like at this moment. Because both the top menu bar and the accordion header have fixed positions, they sit at the top of the page and cover the top half of the content. We'll 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:

1. On top of that, you’ll need to set a background for the rest of your content so that it can flow over the top of the collapsible header. Keep in mind that this effect is similar to the parallax effect; the different backgrounds need to overlay each other.
   1. In the demonstration, we used a plain white background. You always need to set a background on the flow content for this effect to work (otherwise the collapse header won't collapse).
2. Positions the content relative to two fixed elements. top:370px; The rule below is the sum of the height of (70px) and .banner (300px).
3. Set the width to 100% so that the content covers the entire header.
4. Set the height to 100% so that the background covers the entire height of the page (this is important on mobile devices or in the case of long pages).

This is what it looks like in code:

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

View the entire code

And, the folding header is complete. Below, you can view the entire CSS. You can also check out a live demo of the collapsed header effect shown in this article.

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

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

in conclusion

Collapsing headers give you a user-friendly way to display additional content at the top of the page. They work similarly to the parallax effect; you need to have different backgrounds moving at different speeds and position the flowing content relative to the fixed element.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.