Transparent header on front page (mobile)

Hello guys,

I am building a very simple website with no more than just the static front page in it. Since it’s so simple and minimalist I tried to customize it to have no header and no menu at all, only the logo on the left. I did it by selecting a menu with no items in the menu customization and the website looks perfect. There’s only one problem: achieving the same effect on the mobile version of the site. To do so I added this css code:

.btn-menu {
     display:none !important;
}
.site-header{
  background-color: transparent !important;
}

But it only worked on the menu button (it disappeared as I wanted), the header top bar is still there. So I tried this code I found on the support topics:

.site-header {
  position: absolute !important;
  background-color: transparent !important;
}

At first, it seemed like it worked but then I scrolled down and noticed that the header top bar turned white as I scrolled (and that is the only context in which it is opaque, instead of the transparent I want it to be).

What more can I do to work this out?

here is my site

Thank you,
Paimar10

Hello there,

Try adding this CSS code:


@media only screen and (max-width:991px){
  
  .site-header,
  .site-header.fixed{
    position: absolute !important;
  }
  
}

Regards,
Kharis

It’s perfect now.

Thank you so much!

You’re welcome. :slight_smile:

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis