[LunaticStudiosParticipant]

Hi X Support,

I have not been able to work on my website for a few months and just started getting back into it. Anyways, I was hoping to make my Navbar transparent on top of my rev slider, when the user first loads the website. And then when they start to scroll the semi-transparent Navbar I have in place now appears.

I have looked at many threads relating to this, and tried their methods but was ultimately confused, I could not get my head around it.

Looking forward to hearing back from you guys

Thanks,

Caleb

Website – http://www.lunatic.com.au
WP Version – 4.3.1
X Version – 4.1.1

[RupokMember]

Hi Caleb,

Thanks for writing in! It seems you have already added some custom CSS that might conflict our suggested CSS. So first remove them from customizer.

#1. Add this under Custom > JavaScript in the Customizer.

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

#2. Then you can add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-fixed-top {
  background: transparent;
}

..x-navbar.x-navbar-fixed-top.x-navbar-solid {
  background: #fff;
}

.home .x-slider-container {
  margin-top: -80px;
}

Hope this helps.

Cheers!

[LunaticStudiosParticipant]

Thanks for the help, but if I remove all the current custom css it will undo a lot of things.

[FriechModerator]

Hi There,

You don’t need to remove all the custom css, only those that can cause conflict with the given custom CSS above.
for example this one:

.x-navbar {
	background-color: rgba(255, 255, 255, .925) !important;
}

This will keep your navbar background semi-transparent whether on the top or scrolled.

Or you could ignore those css in the mean time; if you’re not sure which css rule to remove. Just replace the given Custom CSS above with this:

.x-navbar {background-color: transparent !important;}
.x-navbar-solid {background-color: rgba(255, 255, 255, .75) !important;}

This should settle the conflict.

Hope it helps, Cheers!

[LunaticStudiosParticipant]

Thank you so much, that works perfectly. Now is it possible to apply this effect to only the homepage? Also is there a way to make the navbar colour return in a much less jarring manor? And lastly, is it possible to have the text switch colours when scrolling.

[RupokMember]

Hi there,

Thanks for updating. If you want this for Home page only then you can use a preceding .home class :

.home .x-navbar {background-color: transparent !important;}
.home .x-navbar-solid {background-color: rgba(255, 255, 255, .75) !important;}

Your other questions are out of our support scope. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[verysandwichParticipant]

Hey Theme.co gang,

I’m trying to achieve a similar effect with site being built at http://cardinalfoxes.net

I want the header / navbar to be transparent at load and then change to solid white upon scrolling. I’d like this to apply only to the Home page if possible. I’ve tried some of the CSS in this thread as well as some others addressing this topic, but haven’t found anything that works.

Any help would be much appreciated.

Thanks!
Josh

[ThaiModerator]

Hi Josh,

Please try with this Javascript:

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

And the following CSS:

.x-navbar.x-navbar-fixed-top {
  background: transparent;
  border: none;
  box-shadow: none;
}

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

.home .x-main {
  margin-top: -76px;
}

Let us know how it goes!

[verysandwichParticipant]

Interesting. So, I added both the Java and CSS code. But upon initial loading, the navbar is still solid. Then when scrolling the tiniest bit goes transparent. Then back to solid with continued scrolling. Any idea what the problem might be?

[ThaiModerator]

Hi There,

Please update the previous CSS a bit:

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

.home .x-navbar.x-navbar-solid {
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}

.home .x-main {
  margin-top: -76px;
}

Let us know how it goes!

[verysandwichParticipant]

Perfecto!

Many thanks.

[ThaiModerator]

Glad it worked 🙂

If you need anything else, please let us know.

[LunaticStudiosParticipant]

Hi X Staff,

I just have one more question regarding this effect. Is it possible to have this only apply to the desktop version? As it causes issues in the drop down menu items for mobile devices.

Thanks,

Caleb

[Rue NelModerator]

Hello Caleb,

Please update the JS code using this:

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");
        }
    });
});

You also need to update the custom css code using this:

@media(min-width: 768px) {
  .x-navbar.x-navbar-fixed-top {
    background: transparent;
  }

  .x-navbar.x-navbar-fixed-top.x-navbar-solid {
    background: #fff;
  }

  .home .x-slider-container {
    margin-top: -80px;
  }
}

The code ensures that it will only be applied to screens greater than 768px (iPad portrait). Feel free to increase 768px to the screen size of your choices. Hope this helps. Kindly let us know.

[LunaticStudiosParticipant]

Hi X Staff,

Sorry for not getting back to you earlier to let you know that the new coding works perfectly. Again thank you so much for your exceptional support.

Thanks,

Caleb

[Author]

Posts