How can i make the header transparent for a specific page only

Store Design
, ,

Topic summary

A user seeks to make the header transparent exclusively on their ‘About Us’ page.

A PageFly support representative provides a CSS solution with step-by-step implementation instructions:

  • Navigate to Online Store → Theme → Edit code
  • Locate the theme.liquid file
  • Insert custom CSS code before the closing </body> tag
  • The code uses conditional logic to target only the ‘about-us/pages/’ URL
  • Applies absolute positioning and 100% width to the header element when the condition is met

The solution includes a screenshot showing where to paste the code. The response appears complete, offering a targeted CSS customization that should resolve the issue without affecting other pages.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi, I am trying to make the header on the ‘about us’ page transparent and only for that page can you help ?

URL: https://matibrnd.com/

Pass: biangu

MT27_0-1707147513719.png
MT27_0-1707147513719.png1905×895 364 KB

2

Hi @MT27

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

PageFlyHenry_0-1707148545797.png
PageFlyHenry_0-1707148545797.png1365×651 47.6 KB

{% if page.url == ‘/pages/about-us-now’ %}

header.header.header--top-center.header--mobile-center.page-width.header--has-menu { position: absolute !important; width: 100% !important; }

{% endif %}

Hope that my solution works for you.

Best regards,

Henry | PageFly