Change Header to Transparent (Sticky Header)

My site is https://tidyu.id/

Hi,

I’d like to suggest you the solution with custom CSS code. However, your site’s header and main background is currently white. That said, it is impossible to see which area is needing the CSS code.

If you have different concern, please let me know. Thanks!

I want it looks like the header in https://demo.themefreesia.com/edge/ so white main background with transparent sticky header. I’ve changed the main background to pink for some time, so you can inspect it. What is the custom css code that I need to put and where should I put it? Thanks.

I tried to add this code in customize css but it didn’t work

.header-transparent .header-transparent-wrapper .site-header {
background-color: transparent;
}

Problem solved. But I have other problem. In mobile it the header is not sticky. But in desktop fine.

How to set the header in mobile sticky? I already enable in customize but nothing happen

How to set the header in mobile sticky? I already enable in customize but nothing happen

Try adding this CSS code to your site’s Additional CSS.

.sticky-header-active.botiga-scrolling-down .mobile-header {
  position: fixed;
  width: 100%;
  top: 0;
}

Tried it to put your code, but nothing happen..

Hi @tidyu,

Thank you for trying the code.

Have you tried clearing caching system that may be enabled on your site with particular plugin? You may also need to clear cache/history on your web browser or PC.