Top navbar to be transparent on hero image

[Atheri]

Hello,

I’m trying to achieve with X theme a relatively simple thing, hopefully.

The top navbar (static) to be transparent on top of the header image.

The old solutions in other topics were not really working…

Site URL is added in the private note.

[ruenel]

Hello Rain,

Thanks for writing in! To resolve our issue, kindly utilize the “Body Class” option in your Page Settings. You will have to edit the page first and insert the Body Class has-hero-image.

Once you added the class, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find out what is the CSS selector of the navbar that we need to use.

Therefore, we can create something like this example code:

.has-hero-image .x-navbar {
   background-color: transparent;
   position: absolute;
   width: 100%;
}

To learn more about the Page Settings, kindly check this out:

• https://theme.co/docs/page-settings#common-page-settings

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

The points above will be a good starting point and if you are interested you can learn more about CSS selectors and details here

If you are more interested in having control over all aspects of the header I suggest that you consider the Pro theme which has a Header builder and you can use various elements to create a Header.

Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.

Thank you.