Site title and header image combined - move header image behind title

Travelify
1

Hello there,

Is it possible in this theme to combine the site title with the header image?

This is the page I’m working on: pregnantmassage.co.uk/store/
and I would like to have the title in the left-hand pink area of the orchid image.

Looking forward to hearing from you!

2

To make website logo and website title to work at the same time you will have to modify theme core files. To proceed you have to open file called header-extensions.php that you can find inside travelify folder >> library >> structure.

There you have to replace these lines of code:

<?php
	if( $options[ 'header_show' ] != 'disable-both' && $options[ 'header_show' ] == 'header-text' ) {
	?>
		<h1 id="site-title">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
				<?php bloginfo( 'name' ); ?>
			</a>
		</h1>
		<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
	<?php
	}
	elseif( $options[ 'header_show' ] != 'disable-both' && $options[ 'header_show' ] == 'header-logo' ) {
	?>
		<h1 id="site-title">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
				<img src="<?php echo $options[ 'header_logo' ]; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
			</a>
		</h1>
	<?php
	}
	?>

With these lines:

		<h1 id="site-title">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
				<img src="<?php echo $options[ 'header_logo' ]; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
			</a>
		</h1>

		<h1 id="site-title">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
				<?php bloginfo( 'name' ); ?>
			</a>
		</h1>

Once you have made these changes both website title and logo will be displayed on your website.

Let me know if this is what you were looking for.

3

Hi Aigars! Thanks for responding.

I have given this a shot, but now I have two site titles, neither of which has the orchid image as a background! Was I supposed to leave <?php in at the beginning?

4

Ok, now I get you what you mean by that. My above solution is definitely not the right one. Please revert changes and notify me about that and I will try to help you from there.

5

Okay, I’ve put back the original header-extensions.php and it’s back to normal!

6

Thank you!

  1. Now add this code to Appearance >> Theme Options >> Other >> Custom CSS.
.hgroup-wrap {
    padding-bottom: 13px;
}

#branding {
   background: url('http://pregnantmassage.co.uk/store/wp-content/uploads/2015/03/cropped-orchids-blur2.png') no-repeat;
}
  1. And remove your custom header image as it will no longer be used and we will use this image as background instead. Don’t remove this image from WordPress completely, just disable it as Custom header image.

Let me know if this is what you were looking for.

7

Oh yeah – just the job! Doesn’t it look sweet! Thank you for your help Aigars!

Have you seen this one recently? http://www.judithblacklock.com

You kindly helped me with the styling of this site last year. I’m pleased to say that we have a multilingual, e-commerce site all working very well from Travelify.

Thanks again!

8

Great job with Judith Blacklock Flower School and now with your new website!

Thank you for using Colorlib themes! :slight_smile:

9

Hi, I’m trying to do something similar here. How do I combine logo AND title text? I see where to add that custom code, but looks like it’s specific to the other other participant in this thread. How can I apply this function? I’d like to combine both my logo and text, not just one or the other. thanks.

10

I applied the custom CSS as above, However my tagline does not appear and the header image is not showing completely. (The bottom half is cut off)

I need the entire image, title and tagline to show all at once.

Can you help me?

see issue at mccameyedc.com

11

@vertigocreative

This thread is marked as resolved. Please start your own thread and leave this as reference.