transparent header only homepage

Store Design
,
1

I have followed the instructions on this page:

https://websensepro.com/blog/how-to-show-transparent-header-in-dawn-13-0-0/

for transparent header in theme dawn. It works good. But it also applies on other pages. I only want it to apply on homepage.

Thank you.

2

Hi @goblender :waving_hand: Check if the template is the index (homepage aka main landing page) as a condition

{% if request.page_type == 'index' and section.settings.enable_transparent-header %}

https://shopify.dev/docs/api/liquid/objects/request

3

Hi @goblender , When you get to this step

BSSCommerceHDL_0-1721523184688.png
BSSCommerceHDL_0-1721523184688.png1849×846 59.4 KB

You should add it as follows:
We need to create a new style tag and wrap it in a condition just for the home page

{% if template.name == 'index' %}
    
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

4

Hello @goblender

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid
    {% if template == ‘index’ %}

.elementor-9746 .elementor-element.elementor-element-9071f05:not(.elementor-motion-effects-element-type-background){ background: transparent !important; position: absolute !important; width: 100% !important; top: 44px; }

{% endif %}

techlyser_web_0-1721493264506.png
techlyser_web_0-1721493264506.png1353×597 503 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

5

This is Richard from PageFly - Shopify Page Builder App

Hi @goblender Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag 

{% if template.name == 'index' %}
    
{% endif %}

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly