The Divi Theme has a highly configurable header. One thing that is missing, however, is an easy way to display a text-based site title and tagline alongside, or in place of the logo.
For example:
Here's how to do it using Divi Booster or, if you prefer, manually via PHP / CSS code.
Note: see this post if you need to add the site title / tagline to the menu module.
Using Divi Booster to add Title / Tagline
Divi Booster includes an option to display the site title and tagline in the header. It'll appear next to the logo or, if you hide the logo, in place of it.
The feature is found on the Divi Booster settings page at:
"Header > Main Header > Show site title and tagline in header".
The feature is available in Divi Booster 2.3.7 onwards.
Layout
The "Layout" sub-setting lets you control how the site title and tagline are displayed.
It offers four options:
* Tagline beside title
* Tagline below title
* Title only
* Tagline only
The layout option is available in Divi Booster 2.9.6 onwards. In earlier versions the tagline is displayed beside the title.
Title HTML Tag
Divi Booster also lets you set the header level of the HTML tag surrounding the title (h1, h2, h3, h3, h4, h5 or p). You'll find it as a sub-option to the title and tagline feature, as shown below:
The option to set the title HTML tag was added in v3.2.1. Version 4.1.3 added the paragraph tag, "P", to the list of available tags.
Tagline HTML Tag
There is also an option to change the header level of the HTML tag surrounding the tagline (h1, h2, h3, h3, h4, h5 or p). You'll find it as a sub-option to the title and tagline feature, as shown below:
The option to set the tagline HTML tag was added in v4.1.3.
Don't Link Title to the Homepage
By default, the title will be a link to the homepage (in the same way the logo normally is). However, you can prevent this, making the title unclickable, by enabling the "Don't link title to the homepage" option like so:
This option was added in Divi Booster v4.1.4.
Adding the Title / Tagline using PHP and CSS
If you don't have Divi Booster, you can manually add the site title and tagline to your site using the following PHP / CSS code:
PHP:
add_action('et_html_logo_container', 'db133_add_title_and_tagline');
if (!function_exists('db133_add_title_and_tagline')) {
function db133_add_title_and_tagline($content){
$logo_regex = '#<img[^>]*?id="logo"[^>]*?/>#';
$new_content = preg_replace_callback($logo_regex, 'db133_add_title_and_tagline_callback', $content);
return apply_filters('db133_add_title_and_tagline', $new_content, $content);
}
}
if (!function_exists('db133_add_title_and_tagline_callback')) {
function db133_add_title_and_tagline_callback($m) {
$logo = isset($m[0])?$m[0]:'';
$markup = $logo.db133_title_and_tagline_html();
return apply_filters('db133_add_title_and_tagline_callback', $markup, $m);
}
}
if (!function_exists('db133_title_and_tagline_html')) {
function db133_title_and_tagline_html() {
$title_and_tagline_html = sprintf(
'<div id="db_title_and_tagline">
<h1 id="logo-text">%s</h1>
<h5 id="logo-tagline" class="logo-tagline">%s</h5>
</div>',
esc_html(db133_site_title()),
esc_html(db133_site_tagline())
);
return apply_filters('db133_title_and_tagline_html', $title_and_tagline_html);
}
}
if (!function_exists('db133_site_tagline')) {
function db133_site_tagline() {
$title = get_bloginfo('description');
return apply_filters('db133_site_tagline', $title);
}
}
if (!function_exists('db133_site_title')) {
function db133_site_title() {
$title = get_bloginfo('name');
return apply_filters('db133_site_title', $title);
}
}Related Post: Adding PHP to the Divi Theme
CSS:
#db_title_and_tagline {
display: inline;
}
#logo {
padding-right: 10px;
}
#logo-text, #logo-tagline {
margin:0;
padding:0;
display:inline;
vertical-align: middle;
}
#logo-tagline {
opacity: 0.7;
margin-left: 16px;
vertical-align: sub;
}
@media only screen and (max-width: 767px) {
#logo-tagline {
display: none;
}
}
.et_hide_primary_logo .logo_container {
height: 100% !important;
opacity: 1 !important;
}
.et_hide_primary_logo .logo_container #logo {
display: none;
}Related Post: Adding CSS to the Divi Theme
Layout
The CSS above implements a "horizontal" layout with the tagline shown beside the title. To achieve a different layout, add your choice of the following CSS snippets to your site, in addition to the CSS given above.
CSS: Tagline below title
#db_title_and_tagline {
display: inline-grid !important;
grid-template-rows: 1fr auto 1fr;
}
#db_title_and_tagline #logo-text {
grid-row: 2;
}
#db_title_and_tagline #logo-tagline {
grid-row: 3;
}
#db_title_and_tagline {
vertical-align: middle;
max-height: 100%; /* Keeps logo in the right place */
overflow: hidden !important;
}
#db_title_and_tagline #logo-text {
display: block;
}
#db_title_and_tagline #logo-tagline {
display: block;
margin-left: 0;
padding-top: 2px !important;
padding-bottom: 2px !important;
line-height: 1em;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #db_title_and_tagline .logo-tagline {
font-size:0;
opacity: 0;
line-height: 0;
}CSS: Title only
#db_title_and_tagline #logo-tagline {
display: none;
}CSS: Tagline only
#db_title_and_tagline #logo-text {
display: none;
}Additional Tips
Hiding the logo
If you want, you can hide the logo from the Theme Customizer, at:
Header & Navigation > Primary Menu Bar > Hide Logo Image
Styling Notes
The code adds the title and tagline to the left of the logo.
The site title / tagline inherits its sizing / styles from the Divi header styles set in the customizer.
On desktop the size is controlled by this option:
Divi > Theme Customizer > General Settings > Typography > Header Text Size
(This will adjust the size of both the title and tagline)
This can be overridden for mobiles / tablets using the following settings:
Divi > Theme Customizer > Mobile Styles > Mobile > Header Text Size
Divi > Theme Customizer > Mobile Styles > Tablet > Header Text Size
An important caveat is that adjusting these may also affect heading sizings elsewhere on the site (mainly where there isn't something else controlling their styles, such as module settings) . If that causes you any problems, you can also override the size on mobile using CSS, given further down in this post.
To avoid the header getting too 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:
#logo-text { display:none !important; }Hide the tagline
To hide the tagline, and show just the Site Title, use this CSS:
#logo-tagline { display:none !important; }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:
@media only screen and (max-width: 980px) {
#logo-text, #logo-tagline { display: none !important; }
}Changing the font size on scroll
This CSS can be used to change the font size when scrolling down (i.e. on the fixed header). It applies a transition so that you get a smooth shrink effect:
/* Fixed header */
.et-fixed-header #logo-text { font-size: 22px; }
.et-fixed-header #logo-tagline { font-size: 14px; }
/* Smooth transitions */
#logo-text, #logo-tagline {
transition: all .4s ease-in-out;
}Changing the font size on mobiles
This CSS can be used to change the font size on mobiles:
/* Mobile */
@media only screen and (max-width: 981px) {
#logo-text { font-size: 22px; }
#logo-tagline { font-size: 14px; }
}
Thansk a lot for this. You save me!
Hi I added the tagline to the right of my logo using Divi Booster but I can't adjust the font size for the tagline. I tried adding it to the css but no difference. This is what I added:
.et-fixed-header #logo-tagline { font-size: 20px; }
Thanks and I love all the features!
Hey Jamie, I'm not sure exactly why, but the .et-fixed-header class isn't being applied to your main header, only the top header. When I get a chance I'll look into why that might be. In the meantime, you should be able to adjust the font size with this:
#main-header h5#logo-tagline { font-size: 20px !important; }Note that that will set the font size the same whether you scroll or not. It'll also overwrite some existing CSS you have set (possibly in Divi's custom CSS) which is currently setting the font size:
h5#logo-tagline { font-size: 20px!important; }If you can track that bit of CSS down you could just change the font size there instead.
Hi, I'm having some problems with this. I used the Divi booster and was able to add the tagline to my header (and hide the site name – it looks like there's a site name there, but that's an image logo).
The problem is that I've been able to change the font, but not the text color (even though I tried !important) and also I'd love to center this text – is that possible? text-align: center; or auto margins don't seem to be helping either.
More importantly, though, when the screen size gets smaller, this text starts to overlap with the menu icons. I'm currently using the code from above to turn the text off on smaller screens, but ideally I'd prefer to keep it on all screens. Do you know what I might need to tweak there?
Thanks!
Actually it looks like the color change is working now…but I'd still love to figure out the alignment issues.
Hi Laura, there isn't a way to do it within Divi Booster (yet), but you should be able to center it on your site using this CSS:
@media only screen and (min-width: 981px) { #logo-tagline { position: absolute; left: 50%; transform: translateX(-50%); line-height: 62px; } }The line-height is set to the height of your header, so anyone else reading this might need to adjust this to suit their own header.
One way to improve the appearance of the text on mobile is to unhide it and try this CSS:
@media only screen and (max-width: 980px) { #main-header { margin-bottom: 40px; } #logo-tagline { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; top: 80px; } }It adds a bit of space below the header and places the text in there (centered). Again the margin-bottom and top values are specific to your header height and may need to be adjusted to suit different sized headers.
I hope that helps, but let me know if not. Cheers!
Hi Dan, what you've suggested here is that is should be possible to unhide the tagline on mobile (currently I'm using the 'show title and tagline' option in Divi Booster, but that's hiding the tagline on mobile, where I'd like it to show.
Any suggestions?
Thanks!
Dan – I've realised I can just use display:inline in a media query. Thanks anyway!
@media only screen and (max-width: 980px) {
#logo-tagline { display: inline !important;
}
}
Nice work, Joe. That's exactly what's needed :)
This worked great! Thank you…
Just want to say a huge thank you for this – really helpful!
Glad that the Divi community has such helpful people as yourself!
You're very welcome, Joe! I'm just glad I could help you out in some small way :)
Where should we add the php code? To functions.php? Thank you!
Hi April, a good place to add it is in the functions.php file of a child theme. You probably want to avoid the functions.php file in the Divi folder itself as this will be overwritten when the theme is updated. This post has more details:
https://divibooster.com/adding-php-code-to-the-divi-theme/
Hi and thanks for this info, it worked great for me although if I am not mistaken, it seems ro remove the link to the home page from the logo image. Unless that is just something happening only on my site? Just wondering if anyone else has noticed this.
Hi Gil, I haven't quite figured out what's going on here, but it looks like the top navigation element is covering the header and making the link unclickable. Adding this CSS seems to fix it without any adverse effects:
.et_header_style_centered #main-header div#et-top-navigation { position: static !important; }Let me know if that doesn't solve it for you. Thanks!
Wow, you are the man as they say. That worked perfectly. FWIW, I did take quite a few, uh, liberties with your original posting here to prevent the site title from appearing at all and to shove the tagline below the logo as per the client's demands. But I finally got it all aligned as desired a few days ago, then realized that the link had been disabled somehow. Again, thank you for posting this in the first place and for taking the time to address my specific issue here.
You're very welcome, Gil. I'm glad that together we've been able to get something that works!
This is nice. Now I have more customization options in my Divi site. Just bought it just now! :D
works great!
thanks for sharing.
Dan that worked beautifully. Could you list CSS Snippets to change the color and font?
Much appreciated – Love Divi Booster BTW!
Thanks Neal!
The title and tagline will inherit the header color / font settings set in Divi > Theme Customizer > General Settings > Typography.
If you need more control, you can use something like this:
#logo-text { color: red; font-family: Arial; } #logo-tagline { color: green; font-family: Verdana; }Hope that helps!
Hi Dan,
Thanks for your help – it worked, but only on 1 page: https://nsphotoartistry.com/about/
On this page it's differant: https://nsphotoartistry.com/contact/ (and the rest of the pages apparently).
Not sure way…If I take away the code, they are identical.
Here is what I used is a Booster CSS box:
#logo-text {
color: white;
font-family: Dancing Script;
font-size: 24px;
}
The page settings are the same all pages as well.
Any suggestions?
Glad you were able to figure it out, Neal! Thanks for letting me know :)
Hi,
The css code is not working! can you help?
Sorry to hear that bhargav. Is there any chance I'd be able to take a look at your site to see if I can spot the problem? (I followed the URL in your comment, but it's currently in "coming soon" mode).
I'm not sure which bit of CSS you're having the issue with, but one thing to check is that the main block of the code is added correctly. In particular, note that this is PHP code, not CSS code, so needs to be added differently to CSS. Follow the link under the code block for instructions on how to add it. You'll know the PHP code is working if the title and tagline will show up.
That's OK Dan I figured it!! Thanks all of your great help!!
Useful! I love it!
I have Divibooster and added the tagline of my site next to the logo.
But I want to remove this when someone is using my site on mobile.
Because it is not looking very good.
Is there any way to remove it only in the mobile version.
It would be a great help.
Thanks!
Hi junaid, you can do it with the following CSS code:
@media only screen and (max-width: 980px) { #logo-text, #logo-tagline { display: none !important; } }You can add the CSS to your site by pasting into the "Divi > Theme Options > General > Custom CSS" box. Hope that helps!