How to make a transparent header apply on home page only?

[natapi314]

I added the below code in the header.liquid to create a transparent header. Right now it is applied to every page which is requiring manual Rich Text blocks with a colored background to be added so that you can see the menu. What do I need to change and or add to the code to make it apply to the home page only?

    <style>

      /* Center the header */

      .header {

        background-color: transparent !important;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        z-index: 1000;

        width: 100%;

        z-index: 999;

      }

[fadi_yousif]

You need to add a conditional that checks if it's the home page. There are two ways you can do this:

1. Check the path of the request (should be /)

2. Check the template name (should be index)