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

The little yellow triangle in the header of this website. Learn how to do that, and a bit more.

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;
}
To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

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?

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

    Notice

    Hi! Please consider signing up for my newsletter for... the occasional email about news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

    You will also get a 10% discount coupon in your inbox as soon as you sign up!

    Photo by Joanna Kosinska on Unsplash

    Default image
    PK
    Hi, I'm a front-end wordpress developer, web designer, and hobbyist photographer living in Australia, and I made this website to share thoughts and tips about web design and everything related to it. If you want to chat, drop me a line here
    Articles: 127

    Leave a Reply

    Generic selectors
    Exact matches only
    Search in title
    Search in content