Docs

[zionchild]

Hello, I’m trying to create a transparent menu bar. I used this code below which I saw on another thread in this forum.

.x-logobar, .x-navbar {
background-color: #000 !important;
}

@media (min-width: 980px) {
.home .x-logobar, .home .x-navbar {
background-color: transparent !important;
}
.home .masthead {
height:0;
}
}

It’s working in chrome but in firefox it is not. Any suggestions? Here’s the site. http://teachmeonlinemarketing.com/asas

Thanks.

[Zeshan]

Hi there,

Thanks for writing in!

Please use this CSS code instead:

.x-logobar, .x-navbar {
  background-color: #000 !important;
}

@media (min-width: 980px) {
  .home .x-logobar, .home .x-navbar {
    background-color: transparent !important;
  }
  .home .x-navbar {
    position: absolute;
    width: 100%;
    left: 0;
  }
  .home .masthead {
    height:0;
  }
}

Thank you!

[zionchild]

That works great! Thanks.

[Paul R]

You’re welcome! 🙂

[zionchild]

This worked on the homepage but it’s not working on all the other pages. It’s there a code to make the menu bar globally transparent?

[zionchild]

This worked on the homepage but it’s not working on all the other pages. It’s there a code to make the menu bar globally transparent?

[Rue Nel]

Hello There,

The given code is only good for the homepage. If you want to set it globally, please update the code and use this instead:

.x-logobar, .x-navbar {
  background-color: #000 !important;
}

@media (min-width: 980px) {
  .x-logobar, .x-navbar {
    background-color: transparent !important;
  }
  .x-navbar {
    position: absolute;
    width: 100%;
    left: 0;
  }
  .masthead {
    height:0;
  }
}

Please let us know if this works out for you.

[zionchild]

That worked great. Thank you.

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts