Docs

[Rhythmcitychurch]

Hi,

Is there a way to make the nav bar transparent so the text sits over the Revolution Slider? Also can it turn a color when a person starts to scroll and then if they go back to the top it goes transparent again?

Thanks!

[Thai]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Rhythmcitychurch]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. You can add this under Custom > CSS in the Customizer.

body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: auto;
}
body .x-navbar {
  background-color: transparent;
  left: 0;
  position: absolute;
  right: 0;
  box-shadow: none;
  border: none;
}
body .x-navbar.x-navbar-fixed-top {
  background-color: rgb(44, 62, 80);
  position: fixed;
}

Hope this helps.

[Rhythmcitychurch]

It works!

Is there a way for it to not be transparent on a mobile device and only on desktop? Also, is there a way to stop the nav bar from being sticky on mobile and only on desktop?

Thank you for all your help!

[Jade]

Hi there,

Please update the code to:

@media (min-width: 980px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: auto;
}
body .x-navbar {
  background-color: transparent;
  left: 0;
  position: absolute;
  right: 0;
  box-shadow: none;
  border: none;
}
body .x-navbar.x-navbar-fixed-top {
  background-color: rgb(44, 62, 80);
  position: fixed;
}
}

Hope this helps.

[Rhythmcitychurch]

Thank you for all the help.

Is there a way to not have a transparent nav bar on portfolio items? The portfolio item is bleeding into the nav bar.

Thanks

[Rhythmcitychurch]

Here is a screen shot

[Nico]

Hi There,

Add this in your Custom > CSS:

@media (min-width: 980px){
.single-x-portfolio header .x-navbar{
background: transparent;
}

.single-x-portfolio header .x-navbar
{
    margin-top: -90px;
}
}

Let us know how it goes.

Thanks.

[Author]

Posts