Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Page header only over content (not over content and sidebar)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #149243
    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.

    #149246
    Tom
    Lead Developer
    Lead Developer

    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.

    #149489
    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

    #149518
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #149586
    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.

    #149628
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.