Docs

[DFrenkel]

Hi, I looked all over the forums and cannot figure out what to do still.

I’d like the header to be transparent and over-layed on top of revolution slider, similar to how this website has it

https://www.homechef.com/

The only solution I found causes the header to be transparent on every page, but I only want it transparent on the home page.

Thank you for your time,

Daniel

[DFrenkel]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media(min-width: 1150px) {
.home .x-navbar {
    background: none;
    margin-bottom: -103px;
}}

Hope it helps

Joao

[DFrenkel]

Thanks for the reply, however, this does not seem to do anything

[Jade]

Hi Daniel,

Please add this code:

.masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

.x-navbar {
    background: transparent !important;
}

Hope this helps.

[DFrenkel]

That works perfect. However, it makes it transparent on every page, not just the home page. Is is possible to apply this code to only the home page?

[Jade]

Hi there,

Please update the code to:

.home .masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

.home .x-navbar {
    background: transparent !important;
}

Hope this helps.

[DFrenkel]

Yes, thank you very much! Ok, 1 more issue. Now on mobile, the menu is transparent and it is almost impossible to see the menu items. Any idea how to fix this?

[Christopher]

Hi there,

Please update previous code to :

@media (min-width:979px){
.home .masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

.home .x-navbar {
    background: transparent !important;
}
}

Hope it helps.

[Author]

Posts