Fullscreen video background + transparent overlaping navbar

Support
#1

Hello,
Just bought my second license for a new project of mine and would like to achieve a similar effect as this website:


This means I would like to make overlape my revolution slider video hero scene with a transparent navbar menu.

Here is a screenshot of what I got so far.
Thank you for your help.

Jp

#2

Hey JP,

This requires custom development in X so I’d recommend that you upgrade to Pro for ease of setup.

If you don’t want to upgrade, the screencast below is a guide to achieve an overlay Navbar effect in X. That is for static header like your sample site. The setup is different for a Fixed Navbar.

Here’s the custom code from that video.

.x-navbar {
  border-bottom: 0;
  background-color: transparent;
  box-shadow: none;
  margin-bottom: -90px /* height of your navbar */;
}

.x-navbar .desktop .x-nav > li > a {
  color: white;
}

.x-navbar .desktop .x-nav > li > a:hover {
  color: yellow;
}

.x-navbar .desktop .x-nav > .current-menu-item > a {
  color: gold;
}

Please just note that this is only a guide. Custom coding is not a part of our support. This is only to help you get started. We will not support issue that will arise from this customization guide and further enhancement of it.

Hope that helps and thank you for understanding.

#3

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