Header Logo

Dear Balazs,

there is a PHP condition in “header.php” which controls displaying of the Site Title or Logo (if there is set a Logo in “Theme Options > Header Settings”, only the Logo is displayed, if there is no Logo, the Site Title is outputted instead):

<?php if ( $songwriter_options_db['songwriter_logo_url'] == '' ) { ?>
      <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
<?php } else { ?>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="header-logo" src="<?php echo esc_url($songwriter_options_db['songwriter_logo_url']); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>
<?php } ?>

To display both Logo and Site Title, just remove the condition:

<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="header-logo" src="<?php echo esc_url($songwriter_options_db['songwriter_logo_url']); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>

If you delete the condition, the custom CSS you have posted above should work, too.

Best regards,
Tomas Toman

If I understand it correctly I should delete these two lines:
<?php if ( $songwriter_options_db[‘songwriter_logo_url’] == ” ) { ?>
<?php } else { ?>
Is that right? That’s what I tried and the whole site turned blank white, not showing anything.

You should delete these two lines plus the <?php } ?> code just at the end of the condition. This is the original code:

<?php if ( $songwriter_options_db['songwriter_logo_url'] == '' ) { ?>
      <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
<?php } else { ?>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="header-logo" src="<?php echo esc_url($songwriter_options_db['songwriter_logo_url']); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>
<?php } ?>

To display both Logo and Site Title, just replace the whole code posted above with this one:

<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="header-logo" src="<?php echo esc_url($songwriter_options_db['songwriter_logo_url']); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>

Best regards,
Tomas Toman

Ah, that worked. Thanks. I think I kind of did the same before but it didn’t work for some reason. Maybe because I left some empty lines.
Now the title appears above the logo. Is there any way of showing it on top of the logo, just like the searchbox? So the logo would act like a background image behind the title. https://balazstudlik.com/

The best way how to show the Site Title on the Logo is to set absolute position for the Site Title:

@media screen and (min-width: 800px) {
#wrapper .site-title {position: absolute; top: 0px; left: 0px;}
}

Best regards,
Tomas Toman

Unfortunately this doesn’t do anything.
I managed to move the title to where I wanted by adding the title to this:

@media screen and (max-width: 1170px) {
#wrapper .entry-content,
#wrapper .entry-headline-wrapper,
#wrapper .post-entry,
#wrapper .entry-headline-wrapper {
width: 100% !important;
}
}
#wrapper .site-title {position: absolute; top: 0px; left: 0px;}
}

But then it resets the with of my website to the original 1170px which I don’t wan’t.
So I also added the title to this:

#main-content,
#footer,
.footer-signature-content,
.header-content,
.top-navigation,
.menu-box,
.site-title {
width: 975px !important;
}

I hoped this would keep my site 975px wide but it didn’t work.

It is strange, because when I tested the custom CSS which I posted above using the Developer Tools in Opera, it worked fine. Please try to modify the CSS in the following way and insert it into “Theme Options > Other Settings > Custom CSS”:

@media screen and (min-width: 800px) {
html #wrapper .site-title {position: absolute !important; top: 0px !important; left: 0px !important;}
}

Ah, there is progress! But it only works between 800 and 1012px. I tried adding this but it didn’t help:
@media screen and (min-width: 1012px) {
html #wrapper .site-title {position: absolute !important; top: 0px !important; left: 0px !important;}
}

Also, I changed the top to bottom so the title would be at the bottom of the logo but that didn’t either, although it worked before.

I just have checked your child theme’s style.css through the W3C CSS validator: see results. There are some parse errors which need to be fixed. This is most probably the reason why the custom CSS I have posted above doesn’t work properly for you. Please fix the parse errors – it seems that you only need to add some closing brackets for your media queries at the end of the stylesheet.

Best regards,
Tomas Toman

I had to add loads of brackets and delete a space before @charset. It’s working now but only above 1012px site width. It doesn’t work below that ??

It seems that there is problem with floating. Please use the following CSS, it should help:

html #wrapper .site-title, html #wrapper #header .header-content .header-logo {float: none !important;}

Best regards,
Tomas Toman

It works perfectly. Thank you, Tomas.

Regards,
Balazs

I am glad that I could help you!

Best regards,
Tomas Toman

Sorry Tomas, I need bit more help.
The header is working fine now but those fixes have probably screwed up something else as the sidebar is not working again ??
It is now have a fixed width of 300px but what I wanted was that when the screen width is less then 1012px the sidebar would become responsive and have a width of 100%. So what I added a was this:

#sidebar {
width: 300px !important;
}
.sidebar-widget {
width: 100% !important;
}
@media screen and (max-width: 1012px) {
#sidebar {
width: 100% !important;
}
}

And it worked fine until I did those fixes today. I’m not sure if the value 100% overwrites the 300px but I have no idea what to add instead. Could you advise, please?
Thank you.

Regards,
Balazs

Dear Balazs,

your second #sidebar CSS selector isn’t specific enough to overwrite the first one. Please add the #wrapper ID (which wraps the whole page) to make it more specific so it overwrites the 300px value:

#sidebar {
 width: 300px !important;
}
.sidebar-widget {
 width: 100% !important;
}
@media screen and (max-width: 1012px) {
 #wrapper #sidebar {
 width: 100% !important;
}
}

Best regards,
Tomas Toman