How do I create a folding title effect using ONLY CSS

Folding titles is a great solution for displaying important information to the user, such as special offers and key notifications. Many developers rely on JavaScript to create such effects, but it is entirely possible to create simpler folding header effects using pure CSS.

Folding headings works like a parallax effect. The background of the folded title remains fixed so that the content below it flows over it as the user scrolls down the page. In this tutorial, we will show you how to create the following collapsing title effects:

The demo consists of three parts:

1. A fixed title with a black background at the top of the page containing the main menu.
2. A folded title with a blue background that contains additional information about the special offer.
3. The user scrolls to the rest of the folded title on a white background.

Collapsing headers is a great fit for the user experience. Users can scroll whenever they want to see specific information, but not be distracted while reading the rest of the content.

Now, let’s see how to create a folding title step by step.

1. Create the HTML

HTML consists of three main parts:

 <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 
Sign Up Now and Choose an Ebook for Free
  # '>"
                   Go to Webinars »
            </button>
        </div>
        <article class="article"> <p>... </p> </article> </div>Copy the code

2. Add basic styles using CSS

Let’s launch CSS by defining some resets and basic styles, such as:

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

3. Place the top menu bar

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

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

z-index: 99; The rule allows the top menu bar to remain at the top of all elements, even if the collapse title collapses completely 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 folded titles, you can set styles using the 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;
}
Copy the code

The nav and menu items inherit the width of

In addition,.menu uses Flexbox, so menu items can be lined up horizontally, while the align-items property is centered vertically.

You can also see that we added Flex: 1; CSS rules to the. Logo element. The Flext attribute 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. Thus, while the menu item remains on the right, the Menu element is pushed to the left of the container.

5. Place folding headings

Folding titles also have fixed locations, like the top menu bar. However, it doesn’t get a Z-index value, so it can “fold” as the user scrolls down the page and the rest of the content gradually overlays 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;
}
Copy the code

As you can see, we used Flexbox again to align the content inside the folded title. Now, it’s a column-based Flex layout that allows you to easily align elements vertically and horizontally using the context-content and align-items properties.

6. Set the style for folding headings

While this is not part of the folding title effect, here is what the descendants of the.banner element (title, description, and button) look like 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;
}
Copy the code

In the screenshot below, you can see what our demo looks like at this point. Because both the top menu bar and the collapse title have fixed locations, they sit at the top of the page and cover the top half of the content. We will style the rest of the content so that the title is foldable in the next step.

7. Style the rest

To make the title fold when scrolling, you need to do four things:

1. Most importantly, you need to set the background for the rest of the content so that it flows at the top of the foldable header. Keep in mind that this effect is similar to the parallax effect; Different backgrounds need to cover each other.
   • In the demo, we used a pure white background. You always need to set the background on the flowing content for this effect to work (otherwise the collapsing title won’t collapse).
2. Position content relative to two fixed elements. top:370px; Here’s the rule<header>Sum of the height of the (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 longer pages).

Here’s 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;
}
Copy the code

Look at the entire code

Also, the folding title is complete. Below, you can view the entire CSS. You can also see a live demo of the folding title 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;
}
Copy the code

conclusion

Folding titles gives you a user-friendly way to display other content at the top of the page. They work in a similar way to parallax effects; You need to move different backgrounds at different speeds and position the moving content relative to the fixed elements.