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:

#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;
    color: #333;
}
.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

2 Comments

  1. I have purchase divi booster from you years before. I appreciate the plug in and the work you have put into it.
    i added this code from above…
    /* 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; }
    I was able to change the background color but unable to change the font color (its gray)
    Please help.
    Thank You

    Reply
    • Thanks James! You should be able to do it by adding a "color" property. I've updated the post to illustrate this – see the line that reads "color: #333;". Note that #333 is grey – you'd need to change this to your own hex color (e.g. "color: #f00;" for red). That should do it, but if not, try changing the line to "color: #f00 !important;" to help override any other styles you might have on the page which are conflicting with these ones. Hope it helps.

      Reply

Submit a Comment

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