Logo and Company Name and Tagline

My front page and other pages had my company name and tagline showing in the header area. (first screen shot). When I tried to add the company logo image, that appeared but without the company name and tagline (screenshot 2). I wish to have both if that is possible or at least have them aligned with each other horizontally in the header.

How can I show both the logo and the company name and tagline either aligned to each other or together.

Screenshot 1

Screenshot 2

Your help will be appreciated

Hello there,

To do it, you have to edit the header.php file in the child theme mode.

Replace the following code block:


<div class="col-md-4 col-sm-8 col-xs-12">
    <?php if ( get_theme_mod('site_logo') ) : ?>
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
    <?php else : ?>
	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
	<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    <?php endif; ?>
</div>

with:


<div class="col-md-4 col-sm-8 col-xs-12">
  <?php if ( get_theme_mod('site_logo') ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>
  <?php endif; ?>
	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
	<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>

For more detailed information about child theming, please visit these links:

If you haven’t yet created any child theme, you can download our premade Sydney child theme that can be downloaded from here.

Regards,
Kharis

Kharis, thank you for your reply. I posted the code block as suggested into my child theme to replace the code used from the parent theme.

I got an error when I visited the site to see the change

  • parsing error line 46 - so I copied the code into notepad++ which showed the following line

    <?php endif; ?>

So nervously I deleted that line but then received the following error in that code lines appeared on my front page header as shown in the screen shot ref here

I have now changed the child theme code back to the code before experimenting with the above so it now shows the company name and tag line as before.

Please suggest what code amendments are needed to correct this.

Hello there,

Thank you for reporting. Unfortunately the screenshot you shared can’t be accessed publicly. Could you please share it to Google Drive instead?

Regards,
Kharis

the link to the screenshot is in google drive as requested

Should you need to see the web page, it can be found at

Hello there,

Thank you for sharing the working links. I guess you pasted the code that sent to your email. It won’t work as expected as it has been encoded. Please see the code on my thread reply. The final code of your child theme’s header.php file should look like this.

Regards,
Kharis

Kharis thank you for the code but I seem to be doing something wrong as still get either the company name and tagline or the logo - not all three. I pasted in the code as you suggested.

I also added the logo image in the appearance/header/site/title/logo and selected the logo image from the media folder (size 150 x 150).

Any ideas as to how to display both company name, tagline and logo at the same time?

Hello there,

If you are using a caching plugin like W3 Total Cache, please delete the cache once you applied code change. Otherwise, it won’t take any affect.

Regards,
Kharis

Kharis, I cleared the general cache in firefox but that did not work. However, I also searched the athemes forum (not just Sydney theme) and found a similar request with a solution that appears to work when I entered the same code (https://athemes.com/forums/topic/adding-logo-removes-site-title-tagline/) It does result in the logo and and company name and tagline appearing although it could look better e.g having the company name and tag line on the right side of the logo.

What css or php code would achieve that?

Web site link

Hello there,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.site-header .col-md-4{
   width: 100%;
}

.site-header .col-md-4 > a{
  display: table;
  float: left;
  max-width: 90px;
}

.site-header .col-md-4 > a img{
  max-height: 80px;  
}  

You would do an adjustment necessarily.

Regards,
Kharis

Kharis thanks for trying but I cleared the cache and pasted the code into the child theme css style sheet but that made no difference - the logo is still displayed above the company name and the tagline is below that

Could you please confirm if a group of CSS code in your child theme’s style.css is error free? You can validate it using this tool: https://jigsaw.w3.org/css-validator/#validate_by_input.

Regards,
Kharis

I valdated it as suggested and the message was

22 Lexical error at line 22, column 24. Encountered: “&” (38), after : “” >
28 Lexical error at line 28, column 24. Encountered: “&” (38), after : “” >

But there is not such a character in the code below that I can see

.site-branding {
display : inline-flex;
}
.site-details {
padding-left : 20px;
}
.site-header .col-md-4 {
width : 100%;
}
a {
display : table;
float : left;
max-width : 90px;
}
a img {
max-height : 80px;
}

I tried deleting the two letter a before the paenthesis but that gave more errors so do not understand what the message means. Can you help please?

Hello there,

Could you please share the complete code in your child theme’s style.css? I would like to debug it on my end.

Share it on https://gist.github.com. Then post the link into it here.

Regards,
Kharis

Kharis the gist url ref with code is

s/gist:b2b7a9815ca9520519068737f9eada4e

Hello there,

To fix the error found in your stylesheet, please replace it with this one.

Regards,
Kharis

Kharis thank you for persevering with my query. Unfortunately whatever the changes made to the errors, when I pasted the code, the it the front page slider reverted to the original sydney theme that is my company title, tag line and menu items and the slider test and subtext all reverted to the template text and look

I have changed them back to the original (still without the logo) and will stop trying to get the logo on for now as I need to finish some work prior to Christmas. thanks

Hello there,

Where did you paste the code into? Was it child theme’s style.css? Basically the changes I’ve made on the CSS code won’t affect to PHP code which handles output of the site branding, menu and slider sections. Did you do another action?

Regards,
Kharis