Archived topic

Page header only over content (not over content and sidebar)

5 replies · Started by Dennis on October 31, 2015

Viewing posts 1–6 of 6

October 31, 2015 at 3:54 pm #149243

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.

October 31, 2015 at 4:10 pm #149246

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.

November 1, 2015 at 5:35 am #149489

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

November 1, 2015 at 11:00 am #149518

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;
    }
}

November 1, 2015 at 2:57 pm #149586

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.

November 1, 2015 at 8:34 pm #149628

Looks good to me :)

This archived topic is closed to new replies.

Start building better websites today.