Here's how to add a piece of centered text above or below the Divi theme's main 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;
}Related Post: Adding CSS to the Divi Theme
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;
}Related Post: Adding CSS to the Divi Theme
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;
}
}Related Post: Adding CSS to the Divi Theme
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
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.
Thank you I will give it a try