Transparent Menu over Revolution Slider Video

Hi,

I’m trying to add a transparent menu over a video like this website https://tonyschwartzmcdj.com

This is my website, I’ve been able to do the video, but not successful in placing the menu at the top over the video https://djbobcarpenter.com

1 Like

Hi Bob,

Thank you for writing in, I see that you added your slider as Feature Slider Above Masthead, please move that as a Feature Slider Below Masthead instead.

Features - Masthead Sliders

And then add this to Theme Options > CSS

@media (min-width: 980px) {
	.masthead.masthead-inline {
		position: absolute;
	    top: 0;
	    width: 100%;
	}
}

Then navigate to Theme Options > Integrity and turn On the Navbar Transparency option.



Let us know how it goes,
Cheers!

That worked. However, its created a couple of problems. First there is a white line about a 2px line that is going through my menu. Secondly, on a mobile phone, the menu is placed about the video with a white navigation bar above it.

Thank You for the assistance.

Hello Bob,

Thanks for updating the thread.

You can add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .x-brand.text {
    display: none;
}

.x-navbar {
    position: absolute;
    right: 35px;
    top: 10px;
    width: 80%;
}

.x-navbar-inner {
}

.x-navbar .mobile .x-nav {
    background-color: #ddd;
}
}

.x-navbar {
    border-bottom: none !important;
}

Here are some related links for further reading:

Hope this helps.

Thank You that worked. awesome.

You’re welcome! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.