Force header picture to always be full screen regardless of window size

Hey guys,
First of all, great theme, thank you!
I have 2 issues on my website I could use your expertise for.

1 - How can I force the header picture to always be full screen regardless of window size?
If you open my website on a tablet in landscape mode for instance, the header picture does not go from the very left to the very right, there is margin on the right side. How can I fix that?

2 - How can I ensure that site title and header do not overlap for big window sizes?
If you open my website on a big screen for instance, the title and menus are not fully above the header as I would like; the bottom part of the menu and site title text is covered by the header.

My website: https://architectsofthings.com

Thank you!

Hello there,

> 1

Add this CSS code into Appearance > Customize > Additional CSS in your site dashboard:


.header-image img {
  width: 100%;
  height: auto;
}

> 2

Add this CSS code:


.site-header,
.site-header.fixed {
  position: absolute !important;
}

.site-header.float-header {
  padding: 20px 0 !important;
}

Regards,
Kharis

Thanks Kharis!

>Issue 1 is solved thanks to your trick.

>Issue 2 is still open. That CSS code you gave me does not keep the header from overlapping with the site title & menu. Also, when I apply it, it affects the mobile view and page title becomes partially hidden by the header if you’re on a smartphone.

I just updated sydney theme and my full screen sliders have all gone weird now… please help … my site is www.trinidadsightseeing.com

Hello @xavierlesmor,

> Issue 2

I am sorry for suggested incorrect code. Please replace it with this:


@media only screen and (min-width:1025px) {

  .site-header,
  .site-header.fixed {
    position: absolute !important;
  }

  .site-header.float-header {
    padding: 20px 0 !important;
  }

}

So it will only be executed on desktop screen.

Hi @goaannie,

Visiting your site, it’s displaying fine to me as seen on this screencast:

Cloudup

Maybe it’s just a matter of cache on your web browser. Please clear it and reload your site. You would also need to check on different computer/network as network cache might apply on your end.

Regards,
Kharis

Hello . It is displaying correctly on some browsers . On safari browser on a mac it is NOT displaying in a desktop view.???

Hello there,

I am not sure why it happens. You may don’t believe this, but, it is displaying fine on my Safari on my Mac.

Cloudup

Can you see this issue also appears on our demo site?

Regards,
Kharis

@Kharis:
I applied your following code in the Additonal CSS field of Sydney theme but it does not solve issue #2.

@media only screen and (min-width:1025px) {

  .site-header,
  .site-header.fixed {
    position: absolute !important;
  }

  .site-header.float-header {
    padding: 20px 0 !important;
  }

}

If I apply the code above, I see the following:
-Issue #2 is still present if I browse architectsofthings.com on my PC (not on my Macbook Air that has a smaller screen). On my PC, the site title and header picture still overlap
-A new issue occurs which is that the menu is not sticky anymore

Hello there,

Try to use this code, please.


@media only screen and (min-width:1025px) {

  .site-header,
  .site-header.fixed {
    position: static !important;
  }

  .site-header.float-header {
    padding: 20px 0 !important;
  }

}

Regards,
Kharis

Kharis,
If I apply this code, it does solve issue #2 of the overlap between the site title and the header. However, my menu is not sticky anymore and disappears as I scroll down the page. I’d like to keep the sticky menu.

Try this code, please.


@media only screen and (min-width:1025px) {

  .site-header,
  .site-header.fixed {
    position: static !important;
  }

  .site-header.float-header {  
    position: fixed !important;
  }  
  
  .site-header.float-header {
    padding: 20px 0 !important;
  }

}

Regards,
Kharis

Hey Kharis,
Thanks a lot, I appreciate your resilience. :slight_smile:
Your code did work. Great job!

One last question: When I apply your code, the menu is still sticky but if a user scrolls down the page, the menu will first scroll away and then abruptly reappear at the top of the page (you can see for yourself: architectsofthings.com); this is less smooth as what I had before which is: the menu always remains at the top of the page.
Is there a way to solve issue #2 AND keep the original sticky menu?

This fix does not work in Perth Pro, as the header-image is loaded as a background image.
Also, the background position is placed inline for some reason, causing my image not to be centered vertically; UGH! Do I have to write custom JQuery, or am I missing something?

Feel free to view my page:

https://hgconsulting.wpengine.com

Thanks

Hello there,

Thank you for writing in. But, it would be better if you create your own topic under Perth Pro support channel here. It’ll help us easier to track progress and maintain this support forum to stay well-archived.

Regards,
Kharis