[Resolved] Centered main content with skewed sidebar

[Shreedhan]

Hi

I’d like to achieve a layout similar to this site:
https://www.nichepursuits.com/amazon-fba-blog/

Where the content is centered and the sidebar is to one side.

Any way to do this?

[Leo]

Hi there,

Looks like we need to move the page header inside the content.

Can you try this snippet first?

add_action( 'wp', 'tu_move_page_header', 20 );
function tu_move_page_header() {
    if ( ! function_exists( 'generate_get_blog_page_header' ) ) {
        return;
    }

    if ( is_home() || generate_get_blog_page_header() ) {
        remove_action( 'generate_after_header', 'generate_page_header' );
        add_action( 'generate_before_main_content', 'generate_page_header' );
    }
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

[Shreedhan]

Done, the header is now within the left hand column on the homepage. The single-post page is still the same for the time being.

[Leo]

Now we can just adjust the left margin with this CSS:

@media (min-width:769px) {
    .site.grid-container {
        margin-left: 500px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

You can fine tune the px number.

[Shreedhan]

Cool thanks. That gets me pretty much there, just need to fine tune the margin now like you say.

Thanks!

[Leo]

No problem!

[Author]

Posts