Header Transparent only on homepage!

[omar_ab]

Hey, I have a transparent header on my website, but I would like it only to be on my homepage because of this problem:

The header is overlapping on the product, making it look bad. I only want this feature on the home page! Thanks-

[dws_pvt_ltd]

Hello @omar_ab , Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

@media (max-width: 991px) {
    .template-index .site-header--transparent{
        background: #fff !important;
    }
}

See the screenshot below,

Feel free to reach out if you have any questions or need assistance.

Best regards,

DWS.

[Zenquor]

Hi @omar_ab You can simple change the css to fix this overlap issue

here is the css

for mobile -

@media only screen and (max-width: 767px) {
.template-product main#MainContent {
    padding-top: 125px !important;
}
}

for desktop -

.template-product .main-content {
    padding-top: 150px;
}

[Kyle_liu]

Hi @omar_ab

You can edit the theme code in line 5761 of the theme. css file and modify the following content

.template-product .page-container {
  background-color: #fff;
  margin-top: 125px
}

If 125px is not the effect you want, you can modify it to the value you need .