Responsive image at the top of a page

Hi there,

The Page Header add-on should be responsive depending on what you're adding as the content.

You can do it using Elementor or another page builder as well using these instructions: https://docs.generatepress.com/article/merging-header-navigation-content/

Hi Tom
Here's a sample page with the header merged:
https://allanjackson.net/personal/sample1/

It's almost what I want but the image isn't at the top of the page and I don't want the site title to show on that page only. Any ideas about that?

Also, is there any way to get the custom to show in one row rather than as a list?

Thanks
Allan

Hi Allan,

To remove the site title, disable the header on that page using Disable Elements: https://docs.generatepress.com/article/disable-elements-overview/

The space seems to be from the content padding. Usually people use the full width option which removes padding. You can do it with some CSS on that page only using my Simple CSS plugin: https://docs.generatepress.com/article/adding-css/

.separate-containers .inside-article {
    padding: 0;
}

Hope this helps :)

Hi Allan,

Not sure where you have placed that image, but in Elementor, section background images are not responsive. You would have to add an image widget to the section and adjust accordingly.

Here is what I managed to come up with using Elementor and Tom's method for the Page Header. Note that I had to add some CSS using Tom's Simple CSS to the meta box for that page to move the nav down towards the bottom, and only on desktop. Would take some further tweaking but it's pretty close :)

@media (min-width: 768px) {
.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a{
    padding-left: 20px;
    padding-right: 20px;
    line-height: 630px;
}
}

Desktop:

Mobile:

Cheers!
Lyle

Hi Tom
Thanks for the reply. The code you provided definitely has improved matters but the image is still not at the top of the page: https://allanjackson.net/personal/sample1/ Any ideas would be welcome.

Hi Lyle
Thanks very much for your input. It does work fine on the desktop but it occurred to me to use the custom menu widget in an Elementor section with a negative margin would place the menu over the image in the spot I wanted. That method is quite responsive. Great site by the way ;-)

Try this:

.separate-containers .site-main {
    margin-top: 0;
}

Thanks Tom, that worked perfectly. All the best to you and everyone at GP for 2017.

Thanks! You too :)