Docs

[DoebankDesigns]

I’m trying to have a semi-transparent navbar on desktop only that changes to solid when scrolling.

Here’s my CSS:

@media(min-width: 768px) {
.home .x-navbar.x-navbar-fixed-top{
background-color: rgba(255,255,255,0.3);
margin-top: 15px;
border: none;
}

.home .x-navbar.x-navbar-fixed-top.x-navbar-solid {
    border: none;
    margin-top: 0px;
    background-color: #fff;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}
}

And here’s my JS:

jQuery(function($) {
    $(window).scroll(function(){ 
        var W = $(window).width();      
        if($(window).scrollTop() >50 && W > 768) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Question #1: The navbar doesn’t START transparent. When the page loads, it’s solid. If you scroll down then back up, it works. How do we get it be transparent on load?

Question #2: Is there a way to make the transition smoother rather than so abrupt?

Question #3: How can I change the font color and swap out the log when the navbar turns solid? I might be able to figure this one out, but I figured if you can help me it would save me a ton of time! 😉

[DoebankDesigns]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code :

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

Adjust the settings according to your wishes.

Hope it helps,

Joao

[DoebankDesigns]

Nope. That didn’t do what I’m going for. Here’s what I’m trying to accomplish:

One page load, the navbar should be semi-transparent with a small top margin. Currently, when the page loads, the navbar is at the top, solid and no margin. If you scroll down then back up, it looks correct.

So maybe we should start with this piece. How do I get it to display correctly when the page loads?

[Joao]

Hi There,

I think that will do, update your CSS to :

@media(min-width: 768px) {
.home .x-navbar.x-navbar-fixed-top{
background-color: rgba(255,255,255,0.3) !important;
margin-top: 15px;
border: none;
}

.home .x-navbar.x-navbar-fixed-top.x-navbar-solid {
    border: none;
    margin-top: 0px;
    background-color: #fff !important;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}
  
.home .x-navbar{
background-color: rgba(255,255,255,0.3) !important;
margin-top: 15px;
border: none;
}  

}

Hope it helps,

Joao

[DoebankDesigns]

Okay, excellent! That’s step one. Now step two:

I want the menu links to change from #fff to #24aa98 when the navbar turns white. I played around with it a bit but couldn’t get it to work right.

[Joao]

HI There,

It just about changing the #fff to #24aa98 , now we have !important beside the CSS code which gives more importance to your code and overwrite the theme settings.

Hope it helps,

Joao

@media(min-width: 768px) {
.home .x-navbar.x-navbar-fixed-top{
background-color: rgba(255,255,255,0.3) !important;
margin-top: 15px;
border: none;
}

.home .x-navbar.x-navbar-fixed-top.x-navbar-solid {
    border: none;
    margin-top: 0px;
    background-color: #24aa98 !important;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}
  
.home .x-navbar{
background-color: rgba(255,255,255,0.3) !important;
margin-top: 15px;
border: none;
}  

}

[DoebankDesigns]

No, I just want the menu links/items to be the green color. The navbar should stay white. Sorry if I was unclear on that.

[DoebankDesigns]

Although, I might like this option better! 🙂 I’ll play around with it some more.

[Joao]

Hi There,

Cool, just let us know if you need help with anything else and will be a pleasure to assist you.

To change the navbar links color you can add the following code:

.x-navbar .desktop .x-nav > li > a > span {
    color: red;
}
  .x-navbar .desktop .x-nav > li > a > span:hover {
        color: blue;
}

Hope it helps,

Joao

[DoebankDesigns]

All right! I’ve got all but one piece working. Is there a way to switch out the logo when the nav bar changes?

[DoebankDesigns]

Actually I kind of got this working too. So…last question:

How do I make the transition from the semi-transparent nav bar to the solid nav bar smoother?

[Joao]

Hi There,

Use the following code on Appereance > Customizer > Js Instead:

jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,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-solid');
   } else {
     $('.home .x-navbar-fixed-top').removeClass('x-navbar-solid');
   }
    
  });
});

Hope that helps

Joao

[DoebankDesigns]

Nope. That didn’t work. It just kept the semi-transparent navbar the whole time.

[Joao]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[Author]

Posts