Header image shift, menu obscured, in Safari

My header image and menu work perfectly in all browsers except Safari. I’ve implemented some custom css to set the height of the image, without which the image is compressed (on all browsers except Safari) or disappears completely (on Safari). But even with this code in place Safari renders a big white bar at the top of the image, obscuring the logo and menu, at screen widths between 1040 and 1920. The code:

.header-image {
  height: 1009px;
} 

The site: http://www.shiftanalytics.com

Any help would be appreciated.

Hello there,

I thought you shouldn’t have to specify the fixed header image height. Because it will cause excess spaces be visible in the smaller screen. Try to apply the following custom CSS code instead.

.header-image{
  background-image: none;
  height: auto;
}

.header-image img{
  display: block;
}

Let me know how it goes.

Regards,
Kharis

That worked. But it created a new issue. On all browsers I now see what looks like a second header image peeking out from behind the bottom of the main image at screen widths above 1024. The image appears to somehow be duplicated.

This may be relevant… I am using this javascript in the footer to overlay a headline on top of my header image because I couldn’t find another way to accomplish it.

<script  type="text/javascript">

(function($){
    "use strict";
    var headerContent = '<h2 class="secondary-headline"><b>A better path to insight</b></h2>';
    $('.header-image').append(headerContent);
})(jQuery);

</script>

I then use the following css to style the headline and reposition it so as the page scales responsively the headline remains positioned over the correct part of the image.

.secondary-headline {
  position: relative;
  width: 100%;
  top: 315px;
  bottom: 0;
  left: 0;
  text-align: center;
  color: #ffffff;
  margin-top: 0px;
}

@media screen and (max-width: 2000px) and (min-width: 1025px) {
  .secondary-headline {
	top: -400px;
  }
}

@media screen and (max-width: 1024px) and (min-width: 840px ) {
  .secondary-headline {	
    top: -380px;
  }
}

@media screen and (max-width: 839px) and (min-width: 740px ) {
  .secondary-headline {	
    top: -320px;
  }
}

@media screen and (max-width: 739px) and (min-width: 640px ) {
  .secondary-headline {	
    top: -280px;
  }
}

@media screen and (max-width: 639px) and (min-width: 540px ) {
  .secondary-headline {	
    top: -240px;
  }
}

@media screen and (max-width: 539px) and (min-width: 434px ) {
  .secondary-headline {	
    top: -210px;
  }
}

@media screen and (max-width: 433px) and (min-width: 368px ) {
  .secondary-headline {	
    top: -190px;
    font-size: 30px;
  }
}

@media screen and (max-width: 367px) and (min-width: 340px ) {
  .secondary-headline {	
    top: -160px;
    font-size: 20px;
  }
}

@media screen and (max-width: 339px) and (min-width: 168px ) {
  .secondary-headline {	
    top: -140px;
    font-size: 20px;
  }
}

I can’t get the issue to happen here. I am using 1440 X 900 screen resolution.

Your overlay text looks nice.

Regards,
Kharis

I’ve got it working with some minor tweaks, such as “inline-block” and “!important”. Here’s what we ended up with…

.header-image{
  background-image: none !important; 
  height: auto;
  width:100%;
  text-align:center;
}

.header-image img{
 /*display: block;*/
  display:inline-block;
  margin: 0 auto;
}

Thank you for your help!