[Resolved] Page header only over content (not over content and sidebar)

[Dennis]

Hi there,

I want the page header to be only over the content box and not over the content box _and_ the sidebar. I know that I can configure the page header image to be shown right above the content, but then I do not have a standalone image box anymore.

Here a is a good old ASCII art of what I want:

***PAGE HEADER*** | ***SIDEBAR*** |
------------------| ***SIDEBAR*** |
***CONTENT***     | ***SIDEBAR*** |
***CONTENT***     | ***SIDEBAR*** |

And what I don’t want:

*************PAGE HEADER***********
-----------------------------------
***CONTENT***     | ***SIDEBAR*** |
***CONTENT***     | ***SIDEBAR*** |

Thanks for your help.

[Tom]

Hi Dennis,

Nice ASCII art 🙂

Set your position to below the header, and then try this function:

add_action( 'wp','generate_move_page_header' );
function generate_move_page_header()
{
	remove_action('generate_after_header','generate_page_header', 10);
	add_action('generate_before_main_content','generate_page_header', 0);
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

Let me know if that does the trick or not.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dennis]

Hi Tom,

thanks for the quick reply!

I created a child theme and added your code to the functions.php. Now the page header is where I want it to be, but there is no gap between the page header and the content.

I think my ASCII art wasn’t precise enough. 😉

There should be a gap between all the containers, so let me try again.

| |----------------- | |---------------| |
| |----------------- | |---------------| |
| |***PAGE HEADER*** | | ***SIDEBAR*** | |
| |------------------| | ***SIDEBAR*** | |
| |------------------| | ***SIDEBAR*** | |
| |***CONTENT***     | | ***SIDEBAR*** | |
| |***CONTENT***     | | ***SIDEBAR*** | |
| |***CONTENT***     | | --------------| |
| |***CONTENT***     | | --------------| |
| |***CONTENT***     | | ***SIDEBAR*** | |
| |***CONTENT***     | | ***SIDEBAR*** | |
| |***CONTENT***     | | ***SIDEBAR*** | |
| |***CONTENT***     | | ***SIDEBAR*** | |
| |***CONTENT***     | |---------------| |
| |***CONTENT***     | |---------------| |
| |***CONTENT***     | |
| |***CONTENT***     | |
| |------------------| |
| |------------------| |

Thanks in advance!

Dennis

[Tom]

Try adding this CSS as well:

.page-header-content {
    margin-bottom: 20px;
    margin-right: 20px;
    margin-top: 0;
}

@media (max-width: 768px) {
    .page-header-content {
        margin-right: 0px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dennis]

Thanks for the hint!

To make it work I added

.separate-containers .page-header-image {
    margin-top: 0px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .page-header-content {
        margin-right: 0px;
    }
}

I don’t know if this is good style but everything seems to work fine.

[Tom]

Looks good to me 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts