Removing header from product details page only

Hi everyone!

Does anyone know how to remove the header content from ALL the product details page, without removing it from the main products page?

I looked up the subject in other posts in the forum, but none of the suggestions worked for me.

Here's one of the pages: https://nizarphotography.com/order-prints/qucdrpywrevk7378eqfacl80bytyi8

I'd like to keep only the bottom half (the product and its details).

Here's everything I tried:

/* remove header */
body#collection-item-5dc5900dbf1e312858698fd0 header.Header.Header--bottom.Header--overlay {
    display: none;
}
/* remove top bar */
body#collection-item-5dc5900dbf1e312858698fd0 header.Header.Header--top {
    display: none !important;
}

body#collection-item-5dc5900dbf1e312858698fd0 {
    display: none;
}

I hope you can help me out with this.

Thank you.

Add to Home > Design > Custom CSS

.collection-type-products.view-item div#headerWrapper {
    display: none;
}

Thank you tuanphan for your response. I tried the code, but unfortunately, it had no effect on the page.

Is it possible that I'm doing something wrong?

3 minutes ago, Elvazur said:

Thank you tuanphan for your response. I tried the code, but unfortunately, it had no effect on the page.

Is it possible that I'm doing something wrong?

Where did you insert?

I just checked. Header was hidden...

Sorry, it did actually remove the navigation menu, but what I intended to do is only removing the "image banner" and text under it, keeping the product details only (with the navigation menu).

2 minutes ago, Elvazur said:

Sorry, it did actually remove the navigation menu, but what I intended to do is only removing the "image banner" and text under it, keeping the product details only (with the navigation menu).

Okay. Remove Code I sent, and use this

.collection-type-products.view-item .page-header {
    display: none;
}

You rock dude. Thanks a lot!