Transparent header looks weird on mobile

[emilier]

Hello,

I just recently edited the theme.liquid code to make my header transparent. It worked well but on the mobile version there is a white line above the header... (see the screenshot)

Can anyone help me fix that?

[Junaid-Ahmed]

Hi @emilier, please share your website link so I can help fix it.

[emilier]

Thank you for the quick reply! My link is sublime-studios.co the password is IMRICH2002

[Junaid-Ahmed]

Hi @emilier, the code you added in your theme.liquid file, please update that to the following and that will fix the issue.

<style>
.section-header .header-wrapper {
  background: transparent;
  transition: background .25s ease-in-out;
}

#MainContent {
  margin-top: -81px;
}

html .section-header.scrolled-past-header .header-wrapper {
  background: #fff;
}

@media (max-width: 749px) {
  html #MainContent {
    margin-top: -96px;
  }
}
</style>

[Rahul_dhiman]

Hello @emilier 
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.header {
padding: 8px 3rem 8px 3rem;
margin-top: -23px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[EBOOST · Accepted solution]

Hi @emilier ,

I checked your store. You can refer screenshot below to adjust code.

[emilier]

That worked, thank you!

[namphan]

Hi @emilier,

Please change code:

@media (max-width: 749px) {
    html #MainContent {
        margin-top: -73px;
    }
}

=>

@media (max-width: 749px) {
    html #MainContent {
        margin-top: -97px;
    }
}

[ZestardTech]

Hello @emilier ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

@media screen and (max-width: 749px){
.banner__media.media.scroll-trigger.animate--fade-in {
    top: -23px !important;
}
}

Let me know if you need further assistance!