Site logo and Site Title Visible

Hello, is there a way that I can have my site logo and the site title visible.

Kindest regards,

Lawrence

Hi Lawrence,

You can manage the logo and site title from customize > Site title/tagline/logo. Let me know if its not working. and please to post the URL of your site also.

Regards,
Awan

Hi Awan,

I understand that I can manage them from 'customize > Site title/tagline/logo. However, I don’t seem able to have a logo and a site title display together.

my site is www.euhcm.com

Kind Regards,

Lawrence

Hi,

Yes, there is no option to do that with the theme but you can make it both visible by modifying the PHP files and I suggest you to create a child theme first before did the trick.

Regards,
Awan

Thank you for your reply. Could you let me know what the CSS code is please.

Kind Regards,

Lawrence

Hi,

You can display both the site title and logo together.
Okay, there is two ways to make it possible.

  1. by modifying the PHP files.
  2. or add a javascript code using footer putter plugin or similar plugin.

Let me know your chosen, and hope I can help you further

Thank you for your reply; I would like to modify the php files.

Kind Regards,

Lawrence

Hello Lawrence,

Please follow the steps below to display the site title and site logo altogheter:

  1. create a child theme and activate it
  2. duplicate header.php file from the parent theme to the child theme
  3. open header.php file in your child theme and change this line:
<?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; ?>

with this:

<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>
<h1 class="site-title">sd<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

That’s it, please let me know how it goes.

Regards,
Awan

Hello Awan, it kind of worked! I have two problems. First there are 2 letter before the first word of the site title an ‘s’ and a ‘d’ which I need to get rid of. Second problem is that I want the site title on one line.

Can you help.

www.euhcm.com

Apologies, I forget to remove the test word from the code in above. Please use the code below instead:

<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>
<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>

Then to make the site title displayed inline, you can add following css code below to the styles.css file within your child theme:

.site-title {
    width: 150%;
}

Thank you for your reply…but is it possible to have the site title in line with the logo, not beneath it.

Kind Regards,

Lawrence

Try add this to the styles.css file:

.site-logo {
    float: none;
    margin-right: 0;
}

@media only screen and (max-width: 425px){
  .site-title {
    width: 100%;
  }
}

Hello, I am still having no luck in getting the site title in line with the logo. To explain further, I want the site title to be located to the right of the logo in line with the centre of the logo. I have made the tweeks you suggest but nada. My custom css is below…any advice would be gratefully received. www.euhcm.com
/*
Theme Name: Sydney Child
Theme URI: https://athemes.com/theme/sydney
Author: aThemes
Author URI: https://athemes.com
Template: sydney
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sydney
*/
.float-header .site-logo {
max-height: 50px;
transition: 0.5s;
}
#mainnav .sub-menu li a {
background: #2e66ba;
border-top-color: #2e66ba;
}
#mainnav ul ul a,
#mainnav ul li ul{
width: 260px;
}
.page-wrap {
padding: 40px 0px 100px;
clear: both;
}
.site-logo {
max-height: 80px;
}
.site-title {
width: 200%;
}widget_sydney_latest_news .roll-button {
display: none;
}
body > .preloader{ display: none; }
.widget-area .widget {
padding-top: 0;
}
.site-info {
text-align: center;
}
#mainnav li.menu-item.current-menu-ancestor > a,
#mainnav li.menu-item.current-menu-item > a {
color: #d65050;
}
body {
overflow-x: hidden;
}
.team-pop {
display: none;
}

Hi,

You can use the css code below and adjust the margin-top as needed:

h1.site-title {
    margin-top: 15px;
}

and also please use the @media query to the .site-title to manage the displays of the site title on mobile screen. So, your .site-title should has css code like this:

.site-title {
  width: 200%;
  margin-top: 15px;
}

@media only screen and (max-width: 425px){
  .site-title {
    width: 100%;
  }
}

Hi, many thanks…all is good apart from the height of the header bar on my IPad / mobile device. How do I adjust that?

Kind Regards,

Lawrence

Which one do you need to adjust?

Hi, I need to adjust the height of the menu bar that appears when I view the site on my IPad.

Kind Regards,

Lawrence

I see, you can use these css code and adjust the value of padding-top and padding-bottom:

@media only screen and (max-width: 991px){
 .site-header.fixed {
    padding-top: 30px;
    padding-bottom: 30px;
 }
}

Hi, thank you for the reply. I tried the code you suggested and it doesn’t appear to work.

Kind Regards,

Lawrence

My last code in above is only worked in mobile screen. Did you check it on iPad or phone screen?