Layout Woocommerce is damaged

Hi there,

It’s expected behaviour as you hide the page hero on page 2,3, but the merged header is still working.

Try this CSS to stop the merged header:

body.archive.paged .header-wrap {
    position: relative;
}

And try this CSS for the navigation/logo color.

@media(min-width: 769px) { 
body.home.paged .header-wrap {
    position: relative;
}

body.home.paged .site-logo.page-hero-logo img {
    filter: invert(1);
}

body.home.paged .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li > a, .header-wrap #mobile-header:not(.toggled):not(.navigation-stick) .main-nav > ul > li > a, .header-wrap .main-navigation:not(.toggled):not(.navigation-stick) .menu-toggle, .header-wrap .main-navigation:not(.toggled):not(.navigation-stick) .menu-toggle:hover, .main-navigation:not(.toggled):not(.navigation-stick) .menu-bar-item:not(.close-search) > a {
    color: #000;
}
body.home.paged  .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a {
    color:#00aa95;
}
}

When I want to show the site logo instead of inverting it, how could I do that?

I think a better approach is to disable the header element on paged pages.

Remove the 2nd CSS in my previous answer, and add this PHP code instead, replacing 100 with the actual header element ID which you can find in the URL when you edit the element.

add_filter( 'generate_element_display', function( $display, $element_id ) {

    if (
        100 === $element_id &&
        is_front_page() &&
        get_query_var( 'paged' ) >= 2
    ) {
        return false;
    }

    return $display;
}, 10, 2 );

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