Transparent top nav in x theme over revolution slider

[Jayzer6]

Good day,

I know this topic has been covered before but I’m having difficulty making it work on this particular integration: http://citadeltime.staging.wpengine.com/ I’d like to remove the white background from behind the top navigation, which I believe it is picking up from the background of the main container. Can you suggest a method that will allow the logo and navigation to remain transparent over the video? We’ve achieved the desired look on one of our other sites: https://uattend.com/ but it was done by the previous admin and I can’t readily identify how it was done. Thank you!

[nabeel]

Hi Jay,

Thank you for reaching out to us. To achieve this in X, you can add the following code in the Theme Options > CSS:

@media screen and (min-width: 989px) {
    .home header.masthead {
        position: absolute;
        width: 100%;
    }
    .home .x-navbar {
        background: rgba(255,255,255,0.4) !important;
    }
}

You can also refer to the following code snippet for future reference https://theme.co/apex/forum/t/code-snippet-stack-the-navbar-over-the-masthead-slider/275

Feel free to make adjustments to the code provided above as per your need. If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

[Jayzer6]

Thank you Nabeel! You guys are awesome and I really appreciate you going the extra mile with the additional information. I will definitely make use of it!

Thanks again!

[ruenel]

You’re welcome!
We’re glad @Nabeel were able to help you out.