How display Site Logo AND Site Title in the Header

I then tried putting CSS code in the ‘Additional CSS’ section as follows:
.logo {
background-image: url(“https://www. …. .com/wordpress/wp-content/uploads/2017/06/… .png”);
background-repeat: no-repeat;
background-position: left;
background-size: 160px 50px;
}

This correctly positioned it, but I can’t create it as a hyper-link, nor add alt-text this way.

Hi,

For that you should also change file header. I recommend using 2 blocks, 1 for logo and 1 for title/tagline.

<div class="logo"> 
	<div class="logo-left"> 
	<?php if ( get_theme_mod( 'gridbulletin_logo' ) ) : ?> 
		<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'>
		<img src='<?php echo esc_url( get_theme_mod( 'gridbulletin_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a> 
	<?php endif; ?>		
	</div>
	<div class="logo-right"> 
		<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
		<h2><?php bloginfo('description'); ?></h2> 
	</div>
</div>

And basic CSS:

.logo-left {width:35%; float:left; text-align:left;}
.logo-right {width:65%; float:right; text-align:left;}

And for mobile stylesheet make width 100% again (if you want that):

@media screen and (max-width:767px) { 
	.logo {width:100%; clear:both; float:left;}
	.logo-left {width:100%; clear:both; text-align:center;}
	.logo-right {width:100%; clear:both; float:left; text-align:center;}
}

You might have to adjust width a little, to center title/tagline.

Guido

Basic CSS should also contain:

.logo {width:100%; clear:both; float:left;}

And you can remove that for mobile stylesheet.

Guido

Closing this topic because of no replies.

Guido