Docs

[mahmoud237]

I want my navbar to be transparent in the first section only .. after scroll down the first section it turned out to be fixed top with a custom color I choose .

[mahmoud237]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.x-navbar {
    border: none;
    box-shadow: none;
}
.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;
}
.x-navbar-scrolled .desktop .x-nav > li > a > span {
    color: white;
}

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: #00a7f4;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: 0;
}

And add the following code to Appereance Customizer Custom Javascript (also remove the word false from there)

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

change the rgba color from rgba(0,0,0, (which is black to your desired color, it appears 4 times on your code with the intention of giving a nice fading effect.

Also you have the pixels 400 500 600 700…that you can adjust.

Hope it helps

Joao

[mahmoud237]

Many Thanks it worked .. one last thing I want the navbar to be transparent but fixed in my first section also … I tried to change it to fixed in header > navbar position but it didn’t work

[Joao]

Hi There,

I am not sure what you mean, would you mind to clarify?

I noticed that you set your Navabar as blue, so your hover links are almost impossible to see. To adjust that please adjust this line of code:

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: #00a7f4;
}

Change from #00a7f4; to another color.

Let us know more details about what you want to achieve,

Thanks

Joao

[mahmoud237]

No problem .. How Can I make it like the attached photo

[mahmoud237]

I want to change hover effect to be like the previous attached photo

[mahmoud237]

and I want to change the blue navbar after scrolling down to be a thinner bit … and to have the same hover effect just like the previous one but with inverse color … the block will be white and text will be blue

[Rue Nel]

Hello There,

Thanks for the updates! To resolve this issue and change the hover effect just like in your screenshot, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar:not(.x-navbar-scrolled) .desktop .x-nav > li > a:hover, 
.x-navbar:not(.x-navbar-scrolled) .desktop .x-nav > .x-active > a, 
.x-navbar:not(.x-navbar-scrolled) .desktop .x-nav > .current-menu-item > a {
   background-color: rgba(0, 167, 244, 0.992157);
    color: #fff;
    transition: all 0.5s linear;
}

http://prntscr.com/c75o15

Hope this helps.

[mahmoud237]

Thanks a lot it worked … I want also to make the same effect on the blue navbar after scroll down but with inverse color … The block will be white and text is blue

[mahmoud237]

Thanks, I made it with the same code and removed not scrolled and change colors

.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 {
   background-color: rgba(255, 255, 255, 0.992157);
    color: #02A7F4;
    transition: all 0.5s linear;
}

Thanks a lot for your help

[mahmoud237]

The last thing I want all of these effects to be active if I on the page or section not only on hover

[mahmoud237]

sorry it worked on the home page but in About us page it didn’t work ( hover and active not working ) :

http://www.appsurg.com/about-us/

[Lely]

Hi There,

Please also add this custom CSS:

.page-id-202 .x-navbar .desktop .x-nav > li > a:hover,
.page-id-202 .x-navbar .desktop .x-nav > .x-active > a,
.page-id-202 .x-navbar .desktop .x-nav > .current-menu-item > a {
    background-color: rgba(255, 255, 255, 0.992157);
    color: #02A7F4;
    transition: all 0.5s linear;
}

Hope this helps.

[Author]

Posts