Divi – How to add a small design element to the header

The Preview

Since you’re already ON this website.. look up at the upper left corner of the header. Yeah

Right there.

Then someone asked me how I did it. So here’s the tutorial on that.

The Video

The Code

#main-header {
	overflow: hidden;
	position: relative;
}
#main-header:before {
	content: "";
	position: absolute;
	display: block;
	top: -76px; /* Play around with the value to get what you want */
	left: -106px;  /* Play around with the value to get what you want */
	width: 260px;  /* Play around with the value to get what you want */
	height: 145px;  /* Play around with the value to get what you want */
	background: #d00;  /* Play around with the color to get what you want */
	transform: rotate(-45deg);  /* Play around with the value to get what you want */
	transition: .3s all ease-in-out;
}
/* This is for the header on scroll */
#main-header.et-fixed-header:before {
	top: -76px; /* Play around with the value to get what you want */
	left: -106px; /* Play around with the value to get what you want */
	transition: .3s all ease-in-out;
}

Pretty simple, right?

PS. If you use a gradient background, sometimes it looks blurry, and I don’t like blurry objects. So I think it’s a low-skill level method.

Need to learn CSS?

Photo by Joanna Kosinska on Unsplash