Header image broken in Firefox and Safari

Hi Perry,

Can you describe how you’ve added the “The Travel List” text?

https://d.pr/i/Yqtx

Hi guys

Thanks for getting back.

I’m using a child theme and have a copy of the header.php in the child theme folder. I have modified this header.php to include spaces and ‘The Travellist’ title as follows:

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<div class="Hero-title">
<h1 class="Travel-Hero">The Travel<span id="Travel-colour">list</span></h1>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><!-- Travellist config -->
</div><!-- .Hero-title -->

n.b. I’ve been meaning to use css for spacing but haven’t gotten around to it yet.

The above code used to work in prior versions of the theme and also works now in Chrome, but breaks in Safari and Firefox (haven’t tested in IE).

I have tried to use Customiser to add ‘The Travellist’ but it does not seem to add it within the header.

Can you please advise whether this is the right approach. In addition, we may want to add/change the current design to include a one line description of the site in the header (below the title text).

Thanks,
Perry

Thanks Perry! And great to hear you’re using a child theme.

First I want to mention that there are two different header files so my first suggestion would be to check if you should be using both of them in your child theme.

header.php
header-home.php

If you’re using the home page template, then you probably want to also use header-home.php in your child theme.

Next, in the update there were some changes to header.php and its related styles:

https://github.com/RescueThemes/gateway/commit/867891ae119f8aafe46af4a1c6f57fff9ffc1daf

The easiest route might be to just copy over header.php again into your child theme and re-apply your custom HTML.

I do offer a support service that includes assistance with minor customizations if you were interested in that: https://rescuethemes.com/support

– Jami

A quick follow up:

I think I may have found an issue if you’re using a logo image that’s larger than the inner header height causing the image to overflow the header space. Applying this CSS should take care of it:

.bg-image-header { height: 100%; }

Yes that’s it! Thanks Jami, you nailed it. It is that class of

.bg-image-header { height: 100%; }

that was causing the issue. I suspected it was in the css as I saw those new classes in the header.php.

And I did use the header-home.php once upon a time but have since just used the header.php lately. I knew that wasn’t the issue as that did not explain the difference between Chrome to Firefox and Safari.

Thanks again Jamie.

Excellent! I’ll add that CSS bit to the next theme update.

I’ll mark this thread as resolved but feel free to open a new one if you have any other issues.