Adding a Centered Title to the Header

This post may contain referral links which may earn a commission for this site

Here's how to add a piece of centered text above or below the main Divi header. This is useful for adding a site title, etc.

Adding Centered Text Above the Header

If you'd like to add a centered site-wide title at the top of your Divi Theme header, here's a quick way to do it. Simply add this CSS to your site:

/* Add centered text above Divi header */
#main-header:before {
    content: 'My Site Title';
    float: left;
    text-align: center;
    width: 100%;
    font-size: 24pt; 
    font-family: Arial;
    font-weight: 700;
    padding: 20px 0;
    line-height: 1.3em;
    background-color: #eee;
}
.et_menu_container { clear: both; }

Just change "My Site Title" to the text you wish to display. You may also want to change the font and colors to suit your site.

Adding Centered Text Below the Header

If you'd like to add a centered site-wide title at the bottom of your Divi Theme header, here's a quick way to do it. Simply add this CSS to your site:

/* Add centered text below Divi header */
#main-header:after {
    content: 'My Site Title';
    float: left;
    text-align: center;
    width: 100%;
    font-size: 24pt; 
    font-family: Arial;
    font-weight: 700;
    padding: 20px 0;
    line-height: 1.3em;
    background-color: #eee;
}

Again change "My Site Title" to the text you wish to display, and change the font and colors to suit your site.

Styling the Centered Text on Mobiles

The code given above should make the text look okay on mobiles too. But you may wish to style the text differently on mobiles, e.g. by reducing the font size and the padding round the text. Here's how to do that:

/* Style the centered header text on mobiles */
@media only screen and (max-width: 981px) {
    #main-header:before, 
	#main-header:after {
        font-size: 14pt !important;
        padding: 10px 0 !important; 
    }
}

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *