Move Slider unter Main-Navigation with transparency

[seanarcher]

Hi,

im trying to move my revolution slider under the main-navigation so it
“shines through”..

i added the following code to the css to make the nav-transparent:

#main-nav, #main-nav.sticky-header {background: rgba(255,255,255,0.95) url(img/nav_bg.jpg) bottom center repeat-x !important; z-index:999;}

This works so far when i scroll down and the slider moves underneath it. but i can’t manage to get the slider approx 100px up, so it’s under the main-navigation even if its not scrolled..

when i add z-index:10 to the slider its above the navigation, z-index:9 already below it.. but it seems that there’s no transparency on the main-nav

maybe you can help me ?

[Kyle – SUPPORT]

Hi

Not quite sure what you want to achieve? It would help if you shared your link

– Kyle

[seanarcher]

This reply has been marked as private.

[Kyle – SUPPORT]

I see, as this is a bespoke customisation I would need to see your link

– Kyle

[seanarcher]

This reply has been marked as private.

[Kyle – SUPPORT]

Try adding this custom css:

#header-section:before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header, .ajax-search-wrap {
  background: transparent;
}
#header {
  background-color: #FFFFFF;
}
.rev_slider_wrapper {
  bottom: 130px;
}

Let me know if it works

– Kyle

[seanarcher]

thanks for your answer. unfortunately it doesn’t seem to work. It moves the header below the navigation, but it doesn’t “shine” through..

[Kyle – SUPPORT]

Add !important on the first property:

#header-section:before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header, .ajax-search-wrap {
  background: transparent!important;
}

– Kyle

[seanarcher]

thanks that worked ! 🙂

[Kyle – SUPPORT]

Ok great! 🙂

– Kyle