[charlescthomsonParticipant]

Hi Support!

I’ve sifted through the forums and discovered how to change a transparent header to a solid header while scrolling. I added the following to custom js:

jQuery(document).ready(function($){
$(‘.x-navbar-fixed-top’).css(“background-color”, “transparent”);
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$(‘.x-navbar-fixed-top’).css(“background-color”, “#fff”);
} else {
$(‘.x-navbar-fixed-top’).css(“background-color”, “transparent”);
}
});
});

This works great. However, I’d like to adjust the transparency of the solid #fff to around 60%. I can’t seem to find anything in the forums that would allow me to do this.

also, is there a way to change to speed in which the switch from transparent to solid happens? Instead of an abrupt change, more of a fade effect?

Any thoughts?

http://www.wanderblonde.com

[ChristopherModerator]

Hi there,

Please update your code to :

jQuery(document).ready(function($){
$('.x-navbar-fixed-top').css("background-color", "transparent");
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.6)").css("transition","0.3s ease-in-out ");
} else {
$('.x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
}
});
});

Hope that helps.

[charlescthomsonParticipant]

Awesome!

Works like a charm. Curious thought – is it possible to make the header increase or decrease opacity as you scroll? would it be best to just adjust the transition speed? Totally understand if this is beyond the scope of your support!

[Rue NelModerator]

Hello There,

If you want to slowly change the opacity as yo scroll the page, you can update the code and use this instead:

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

Hope this helps. Kindly let us know.

[charlescthomsonParticipant]

Works!

Is there a way to restrict the above to only appear on the home page? I’m running into an issue where content on other pages appears behind the header which isn’t ideal… especially for post pages where I can’t easily adjust the placement or margins of the sidebar etc.

http://www.wanderblonde.com/?p=1

Cheers!

[Nabeel AModerator]

Hi again,

To restrict the code only for homepage, just replace the previous code with this one:

jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 150) {
    $('.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() > 90) {
    $('.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() > 40) {
    $('.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 ");
   }
  });
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[charlescthomsonParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-navbar {
    background-color: transparent;
}

Hope it helps 😉

[charlescthomsonParticipant]

Cool thanks!

I’ve noticed that now my pages and posts are being cut off and loading behind the header. This is great on the homepage where the header is transparent. However, on posts it is cutting off sidebar widgets. For pages, i’m having to adjust the top margins by 100px to have sections appear below the header.

Any thoughts on how to correct this?

Thanks!

[FriechModerator]

Hi There,

I can’t seem to replicate or I’m just not entirely certain of the issue, would you mind providing us with a little more clarification (perhaps some screenshots). I’m not seeing your header covering anything.

Thanks.

[charlescthomsonParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

It’s because of this CSS,

.masthead {
  position: absolute;
  width: 100%;
}

Please remove it, or just change it to this

.home .masthead {
  position: absolute;
  width: 100%;
}

Thanks!

[charlescthomsonParticipant]

Thanks that did the trick!

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts