Removed my header in css but I want the cart button to still be there

Store Design
, , ,

Topic summary

Main issue: On a specific collection page using the Refresh 9.0 theme, the header and footer were hidden via CSS, which also removed the cart icon. The goal is to keep the cart button visible while the header/footer remain hidden.

Cause/Context: The cart icon likely resides inside the header. With CSS display:none on the header (parent), all child elements (including the cart icon) are hidden and cannot be shown by styling the child alone.

Proposed solutions:

  • Structural approach: Add/duplicate a separate cart icon outside the hidden header for pages where the header/footer are removed.
  • CSS refinement: Use more specific selectors to hide only the header/footer while ensuring the cart icon remains visible. Example provided: hide .site-header and .site-footer for the target template, then set .cart-icon to display:block.

Feasibility note: There’s disagreement—if the cart icon is inside a display:none header, a child-level display override won’t make it visible; it must be moved/duplicated outside the hidden container.

Status: No confirmation or final resolution from the original poster. Code snippet is central to the proposed fix.

Summarized with AI on January 26. AI used: gpt-5.
1

Hello,

I’m using Refresh 9.0 theme and I recently removed a header and footer from this specific page, when I did that it took away the cart icon from this page?

Is there any way to add back the cart button but keep the header and footer gone? I removed the header and footer through .css code.

https://snackbox.canteen.com/collections/fgcu

Thank you,

Daniel

2

If you make display none to the main parent div then you can’t make the child element visible for it. You have to keep separate cart icons outside the header for the pages where you have to hide the header and footer.

3

Modify the CSS code to exclude the cart icon from being hidden. You can do this by using a more specific selector for the cart icon element. For example, if the cart icon has a class of .cart-icon, you can update the CSS code as follows:

.page-template-template-custom-page .site-header,
.page-template-template-custom-page .site-footer {
  display: none;
}

.page-template-template-custom-page .cart-icon {
  display: block;
}