transparent header only homepage

[goblender]

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.

[PaulNewton]

Hi @goblender  👋 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 

[BSSCommerce-HDL]

Hi @goblender, When you get to this step

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' %}
    <style>
       {% if section.settings.enable_transparent-header %}
    .header-wrapper{
      background: transparent !important;
    position: absolute !important;
    width: 100% !important;
    top: 0px;
  }
  {% endif %}

  {% if section.settings.color-transparent %}
@media only screen and (min-width: 600px) {
    .list-menu__item, details[open]>.header__submenu {
  color: {{ section.settings.color-transparent }} !important;
      background: transparent;
    }
  
}
  .header__icon.link,.header__active-menu-item,.disclosure__button,.header__heading-link .h2{
  color: {{ section.settings.color-transparent }} !important;
    }
    {% endif %}
    </style>
{% 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 😍

[niraj_patel]

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 </body> on theme.liquid
 {% if template == 'index' %}
    <style>
        .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;
       }
    </style>
  {% endif %}

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

[PageFly-Richard]

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 </body>

{% if template.name == 'index' %}
    <style>
     #content{
           margin-top: -100px;
      } 
      </style>
{% endif %}

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly