Responsive header

Resolved tajensen
(@tajensen)

10 years, 4 months ago
I know this topic has been addressed before, but it is now marked as closed, so I’m opening a new one.

In the previous topic that addressed header responsiveness, the following was given as a possible solution:
```
.custom-header-image {
background-position: top;
background-size: 100%;
background-repeat:no-repeat;
}
```
However, that leaves a large gap between the header image and the nav bar. I was able to force the theme to display the header as desired by modifying header.php in my child theme, but now I lose support from the Theme Options. Please take a look at this link to see how my header currently displays: dev.sturbridgetimes.com.

Is there a fix that will keep the responsiveness that you see in the link while restoring support from the Theme Options?

-Tim

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter

tajensen

(@tajensen)

10 years, 4 months ago

To answer my own question, here’s the solution I came up with:

Copy header.php into the child theme and replace this existing code:

<div class="custom-header-image" style="background-image: url('<?php echo header_image() ?>'); width: <?php echo get_custom_header()->width; ?>px; height: <?php echo get_custom_header()->height ?>px;">

with this code:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src= "<?php echo header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height= "<?php echo get_custom_header()->height; ?>"/>
</a>

Theme Author

Tim Nicholson

(@timnicholson)

10 years, 2 months ago

Awesome, thanks for figuring this out and taking the time to post the solution. This will be very helpful to people that don’t want the header to be cropped.

posword

(@posword)

10 years ago

This didn’t work for me under WordPress 4.2.2. I copied the header.php into the child theme and made the change. Now I get both the text header and the header image. So I have had to change back to the original file that was in my child theme, which contains this:

// Get custom header image and determine its size
				if ( get_header_image() ) {
				?>
					<h1 class="site-title screen-reader-text"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' )?></a></h1>
					<h2 class="site-description screen-reader-text"><?php bloginfo( 'description' ); ?></h2>
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="custom-header-image" style="background-image: url('<?php echo header_image() ?>'); height: <?php echo get_custom_header()->height ?>px;"></a>

But the header image is reduced in size considerably See site.

posword

(@posword)

10 years ago

The actual uploaded header image is 1050 x 116px and it is displaying at 510 x 55px.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Responsive header’ is closed to new replies.

Tags