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:
Related Post: Adding PHP to the Divi Theme
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.
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: