Docs

[yhshin1020]

Hey,

I want to make the header transparent and have it overlap on top of the content on the page, instead of the content coming below the header.

I have included more details in my next reply.

Thanks!

[yhshin1020]

This reply has been marked as private.

[Rahul]

Hey There,

Thanks for writing in!

In order to make a transparent header, follow this ticket.

https://community.theme.co/forums/topic/transparent-header-2/

Hope this helps!

[yhshin1020]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS:

.home .x-navbar {
    position: absolute;
    width: 100%;
}

Hope it helps 🙂

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Joao]

Hi There,

Upload the code above to:

@media screen and (min-width: 969px) {
  
.home .x-navbar {
    position: absolute;
    width: 100%;
}
}

This code will affect just the home page and devices above 969px you can remove .home and the code will affect all the pages, you can increase the number of 969px to higher resolutions if you feel like (ex: 1200px).

If you need further help please point which pages exactly you are trying to achieve this effect.

Thanks

Joao

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit Global Javascript in the Customizer.

jQuery(function($) {
     $('.ubermenu-responsive-toggle').on( "click", function() {
         $('.x-navbar').toggleClass('navbar-solid');
     });
});

Then add this in Custom > Edit Global CSS

.x-navbar.navbar-solid {
    position:static !important;
}

Hope that helps.
`

[yhshin1020]

This reply has been marked as private.

[Paul R]

Hi,

In that case, kindly remove the code provided and add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
body .x-navbar {
    position:static !important;
}
}

Hope that helps

[yhshin1020]

Thanks, that was what i was looking for!

Great!

[Joao]

Hi There,

Glad to hear it, let us know if you need further help.

Thanks

Joao

[Author]

Posts