The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

The Divi Theme has a highly configurable header. One thing that is missing, however, is an easy way to display the site title and tagline. Here's how to do it.

We will add the text title and tagline to the right of the logo, as shown here:

If you want, you can hide the logo from the Theme Customizer ("Header & Navigation > Primary Menu Bar > Hide Logo Image").

Method #1: Using Divi Booster

This feature is included in Divi Booster. My Divi Booster plugin is the easiest way to customize Divi, allowing you to make hundreds of useful modifications to Divi with just a few clicks - no code needed!

This feature is available as of Divi Booster v2.3.7. It can be found on the Divi Booster settings page under "Header > Main Header > Show site title and tagline in header".

Method #2: Manually Adding PHP code

If you're comfortable working with PHP code, here's the code to achieve the effect:

Styling Notes

The code adds the title and tagline to the left of the logo.

It does only the minimal of styling, but you can control their size, color, etc, from the "Typography" section of the Theme Customizer – it will use the "header" styles. You can override these via CSS, using the "#logo-text" and "#logo-tagline" selectors.

To avoid the header getting to overcrowded, the code hides the tagline on mobile devices.

CSS Snippets

Here are some CSS snippets which might prove useful if you are using this code (or the Divi Booster option).

Hide the Title

If you just want the tagline, you can use the following CSS to hide the site title:

Hide the tagline

To hide the tagline, and show just the Site Title, use this CSS:

Hide the title and tagline on mobiles

To show the title and tagline on desktops, but hide them on mobile devices, you can use this CSS: