Docs

[Dronebros1]

I’m using the X Theme and Revolution slider I want to make the menu bar transparent with the slider behind it, so that the top of the slider is the background of the menu bar. I tried adding some code I found on Stack Overflow which partially worked but the bar is now compressed on the right side of the screen.

Here is the site: http://845.b40.myftpupload.com

Here is the CSS for the home page:

.h-section {
  margin: 0;
  line-height: 1;
}

.announcement {
  margin-bottom: 0;
  font-size: 16px;
  font-size: calc(14px + 0.35vw);
}

.release {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  box-shadow: 0 0.25em 1.5em rgba(0, 0, 0, 0.5);
}

.tour-dates {
  margin: 0 auto;
  max-width: 500px;
}

.video {
  margin: 0;
  border: 0;
  background-color: #ded8c2;
  box-shadow: none;
}

.x-navbar{
    background-color: transparent;
}

.x-navbar-wrap{
    margin-top: 40px;
}

.tp-bullets.hidebullets{
    bottom:60px;
}

header{
  position:absolute;
  top:0;
  background:transparent;
  width: 100%, left: 0 and right: 0
 
}

Thank you!

(X Version 4.6.0)

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS Instead of the code you have placed.

.home .x-navbar {
            position:absolute;
            width:100%;
            background-color:transparent !important;
            box-shadow: none;
            border: 0;
       }
       body.x-navbar-fixed-top-active .x-navbar-wrap {
            height: auto;
       }

Hope that helps

Joao

[Dronebros1]

Thanks so much, with some adjustment that worked perfectly!!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts