Transparent Nav bar above slider

Support
#1

How will I do it ?

Transparent Nav only for home page with revelation slider .

when scrolling and another page nav become solid color

#2

Hi There,

Please add the following code to Theme Options CSS

.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    -moz-box-shadow:   none;
    -webkit-box-shadow: none;
    box-shadow:         none;
       color: white;
}
.x-navbar-scrolled .desktop .x-nav > li > a > span {
    color: white;
}


.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: white;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: 0;
}
@media (min-width: 980px) {
	.x-slider-container.below {
		margin-top: -75px;
	} 
}

.x-main.full {

    margin-top: -91px;
}

Please add the following code to Theme Options JS

jQuery(document).ready(function($){
  $(' .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $(' .x-navbar-fixed-top').css("background-color", "rgba(51,51,51,0.85)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $(' .x-navbar-fixed-top').css("background-color", "rgba(51,51,51,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $(' .x-navbar-fixed-top').css("background-color", "rgba(51,51,51,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $(' .x-navbar-fixed-top').css("background-color", "rgba(51,51,51,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $(' .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
    
   if ($(this).scrollTop() > 100) {
     $(' .x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $(' .x-navbar-fixed-top').removeClass('x-navbar-scrolled');
   }
    
  });
});

Hope it helps!

#3

Thanks a lot. It’s working 50% , have some issues http://www.skiandfly.com/ .

when I visit the site, nav bar show just white spaces , when scroling its working good .
now not showing blog post title

#4

Thanks a lot, I did it, but showing not correctly plz check` http://www.skiandfly.com/``

#5

Hi There,

Please add the following code to Theme Options CSS

.x-navbar {
    background: none;
    border-bottom: none;
    box-shadow: none;
}

And replace -75 for -90 on the code below:

@media (min-width: 980px) {
	.x-slider-container.below {
		margin-top: -75px;
	} 
}

Hope it helps

#6

You are really awesome Man. Thanks a lot. but something is happeing for another page . homepage 100% Oke. another pages Nav bar has hidden…

#7

Hi,

I am sorry but I can’t find the page you are referring to.

Can you provide us the exact url of the page where your navbar is hidden.

Thanks

#8

I have added all codes, Homepage is okey, but problem in another pages and logo
this my site plz- ski and fly

#9

Please Help me Dear Joao

#10

Hi,

Please change the code that reads

.x-navbar {
    background: none;
    border-bottom: none;
    box-shadow: none;
}

@media (min-width: 980px) {
	.x-slider-container.below {
		margin-top: -75px;
	} 
}

with this

@media(min-width: 980px) {
.home .masthead  {
      position:absolute;
      width:100%;
}

.home .x-navbar {
      background:transparent;
      border:0;
      box-shadow:none;
}
}

Hope that helps.

#11

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