[CaptrawrsParticipant]

alright thanks for the help

[ThaiModerator]

You’re most welcome 🙂

[BenjaminParticipant]

Hi Staff and #Captrawrs

I would like to achieve the same transparent header/navbar that you have here http://forthepeopleusa.org/

With this header/navbar it loads as transparent then when you scroll to the end of contant-band 1 the header/navbar changed to white.

Could you please share the code that worked for you?

Best regards,

Ben

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> JavaScript :

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 200) {
			$('.x-navbar-fixed-top').css("background-color", "#fff");
		} else {
			$('.x-navbar-fixed-top').css("background-color", "transparent");
		}
	});
});

Hope that helps.

[BenjaminParticipant]

Hello,

Thanks for that. By changing this >200 value to >800, in the above code, adjusts when the transparent affect finishes ie: at the bottom of the masthead.

However, the navbar starts off white and only becomes transparent when you start to scroll. Could I get it to load as transparent to begin with? As shown in this example http://forthepeopleusa.org/ the navbar is transparent when the page loads.

How could I achieve this?

Cheer,
Ben

[Rue NelModerator]

Hello There,

Please update the code above using this instead:

jQuery(document).ready(function($){
  $('.x-navbar-fixed-top').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
  
  $(window).scroll(function(){
    if ($(this).scrollTop() > 200) {
      $('.x-navbar-fixed-top').css({'background-color': '#fff', 'box-shadow': '0 0.15em 0.35em 0 rgba(0,0,0,0.135);', 'border-width' : '1px'});
    } else {
      $('.x-navbar-fixed-top').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
    }
  });
});

Please let us know if this works out for you.

[BenjaminParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello Again Ben,

Sorry there was a typo error in the previous code I gave you. Please update the code by inserting this following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
  $('.home.x-navbar-fixed-top-active .x-navbar-wrap').css('height', 0);
  $('.home .x-navbar').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
  
  $(window).scroll(function(){
    if ($(this).scrollTop() > 200) {
      $('.home .x-navbar-fixed-top').css({'background-color': '#fff', 'box-shadow': '0 0.15em 0.35em 0 rgba(0,0,0,0.135);', 'border-width' : '1px'});
    } else {
      $('.home .x-navbar-fixed-top').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
    }
  });
});

And I think this custom css is also need to be inserted in your customizer, Appearance > Customize > Custom > CSS

body.home.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
}

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

Please let us know if this works out for you. Thank you.

[BenjaminParticipant]

Thanks for the update,

That code seems to work.

The only issue I have now is on a mobile view. the menu items are covering the landing page text.
See screenshot of issue on mobile:
https://goo.gl/photos/ByXAESAhrs47kome6

Could you please suggest a way around this issue?

Best regards,

Ben

[ChristopherModerator]

Hi there,

Please change previous CSS code to :

@media (min-width:979px){
body.home.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
}

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

Hope that helps.

[BenjaminParticipant]

Hello,

I’ve added that code, but unfortunately that didn’t change the menus on mobile.

See screenshot.

https://goo.gl/photos/LxERMFrHrZNyfWbV7

Also, I can see another issue now. The landing heading text ‘Learn Vietnamese’ is not responsive any longer! It was previous to adding this code so it seems to have affected that text too!

Any assistance is much appreciated.

Cheers,
Ben

[RadModerator]

Hi Ben,

Hmm, are you trying to apply fixed positioning for your navbar on mobile? Because that setup will cover the view and its normal. Expanding menu without covering other element is only possible for static positioning.

Please remove the CSS given above and add this,

@media ( max-width: 979px ) {
.x-navbar-inner {
background: #fff;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto !important;
}
}

Thanks.

[BenjaminParticipant]

Hello,

Thanks very mcuh. That has fixed the nav for mobile, nicely. Much appreciated.

Cheers,

Ben

[RupokMember]

You are welcome Ben!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[andreulloverasParticipant]

Hi!

Now i’m using this javascript code and it works at half:

jQuery(document).ready(function($){
	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	var rev_height = $(".x-slider-container").height(); 
	$(window).scroll(function(){
		if ($(this).scrollTop() > rev_height) {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: #57AD43 !important');
		} else {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important');
		}
	});
});

As you can see in http://www.arpgirona.com the slider comes green when I scroll. I want it to be transparent during all Revolution Slider, as it was commented in this post.

I don’t know javascript, so i’m not sure what’s happening. I’m not sure if i should change “.x-slider-container” or what i need to do.

Can you help me?

Thanks!

[Author]

Posts