How would I do this?

[us291888]

Hi. Is there a setting in X Theme that would accomplish this look with the image and menu at the top that is transparent?

Salem Lutheran Church

[jade]

HI there,

Yes, this is possible by adding a section on the page with a huge image then add this code to the Global CSS:

.masthead {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.x-navbar {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

If you only want the navigation area to be transparent and over the large image on the homepage, use the code:

.home .masthead {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.home .x-navbar {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.

[us291888]

When I scroll down, how do I make the nav bar a solid color? Is there a demo of X Theme that does all of this?

[friech]

Hi Jason,

That is not actually a feature that offered by standard header (X), you can do that with PRO’s header builder.

Thanks,