[Resolved] Page header – cover or contain? Keep menu below hero image

[Daniel]

1. I successfully created a full-page slideshow on the Front Page by creating a hero element and adding a slideshow shortcode. I’m using the Peak theme.
2. I moved the navigation underneath the slideshow (Element > Site Header > Navigation Location) so that it stays snug against it as I change the viewport size.

However, I am not succeeding at doing the same thing to other pages using a banner image.

1. If I apply contain to background-size the nav bar does not stay connected with browser window resizing. (Try making browser window <769px).
2. I did try applying two bg images in the same div (one placed background-position: left top fading out on the right and the other placed background-position: right top fading out on the left). You’ll see it work as you move the browser in. It does work and I may end up combining this method with contain for browser widths under 769px.

Bottom line is I’d like to be able to make my nav bar stick to the bottom of my hero image when I use background-size: contain; on all secondary pages so that they respond like the front page.
Thanks!

[David]

Hi there,

leave the header element background-size as cover.
Then edit your top padding and change it to 12.5%.
As long as there is no content in the Header Element it will display full size and behave responsively.

Note: 12.5% is the aspect ratio of your original image:

250 W / 1200 H * 100 = 12.5%

[Daniel]

Crazy. Worked like a charm! Maths. 🙂 (Just an fyi for future viewers: the dimensions were W2000xH250. So, the final result was indeed 12.5%. A fractional percentage cannot be entered into the element padding window, so it must be entered somewhere else, such as the Customizer Additional CSS window).

Thank you, David!

[David]

Happy to be of help

[Author]

Posts