Hello Lajuli,
The logo image size is limited by 100px of its maximum height. To change it, you can use the following CSS code:
.site-logo {
max-height: 150px;
}
To apply it to your site, you can add it into Appearance > Customize > Additional CSS.
Regards,
Kharis
how do you increase size of logo when browser window is full width of monitor?
At present, my logo is only about 50 px high, and cant increase size by playing around with code in editor for some reason. It only increases in size when the browser width is narrowed…great for mobile/tablet, but not desktop.
Hello there,
It should work on all screen sizes. I noticed there are too much white spaces around the original image. Try to remove it using image editor program like Photoshop, so the actual height will be noticeable.
Regards,
Kharis
Thread Starter
lajuli
(@lajuli)
Hi Kharis, thanks for your help! My logo looks much better now thanks to you! Lajuli
Hi Kharis – just used this – worked a treat – thank you. Is there a similar (i.e. easy!) way to add text next to the logo?
-
This reply was modified 6 years, 9 months ago by
kelvynjames.
Hello @kelvynjames,
The easiest way is to edit your logo image and add a text with image editing program like Photoshop.
If you want to display site description along with your logo, you’ll need a child theme to override the header.php file. Download our premade child theme from here. Unzip it. Then you’ll need a copy of the header.php file inside the child theme folder. Then edit this new header.php file with your code editor program. Find this 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>
and replace it with this:
<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>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?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>
Save changes, then install and activate your child theme either from site admin (/wp-admin) or FTP program.
https://codex.wordpress.org/Using_Themes#Adding_New_Themes
Regards,
Kharis
Hi Kharis – thanks for the speedy reply. Yep I think I’ll go the photoshop route as it looks too complex for me to do the Child theme thing – this is only my second website ever!
