Header builder PRO sticky trigger selection

[cvdw]

Hi!

I try to rebuild this header menu https://cococabane.com/ (normal header from Theme options with some customisation) in the PRO header builder on this test site: https://bubbels.nl/wp/

I made some progress already with the inline menu. It has to start with a transparent background and after the Revolution slider is has to change to a solid color backgound. I set up the 2 Bars and thats working fine but it is getting a solid background after scrolling. So I tried to activate the second solid bg bar with the Trigger Selector but can’t get that working. I first tried the class .x-main full but that’s not working and gave the first section of the page the class trigger-start and used that in the Trigger Selector but also not working.

Can you see why this Trigger Selector is not working to me?

I send a login in private

Thanks, Carel

[ruenel]

Hey Carel,

Thanks for writing in!

I just checked your header and it appears perfectly working already. When you scroll the page, the sticky header triggers with a solid background color.

You may need to clear your browser cache first or use private browsing mode and test the site again.

Kindly let us know how it goes.

[cvdw]

@cvdw

Trigger Selector

Yes, I know but it has to be triggered after the Tigger selector point!

So it has to stay transparent over the Revelution slider and beyond that point solid.

Like here: https://cococabane.com/

And a second question: The mobile menu has to com up after the hamburger and close after clicking a menu item. All the headers in the design cloud only close after the X button. Thats very strange to use…

THX Carel

[ruenel]

Hey Carel,

I have taken closely the custom modifications added in the default header in the example site. The desired effect that you have created in the default header cannot be replicate with the custom header using the Bar elements. You will also need to run JS code to make it possible. You will have to modify your original JS code to make it work with the custom header in the builder.

   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-10) {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: rgb(247, 246, 243) !important');
       $('.x-navbar li a').css("color","#624228");
         $('.x-btn-navbar, .x-btn-navbar:hover').css("color","#624228");
		} else {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: "transparent" !important');
      	$('.x-navbar li a').css("color","#FFF");
         $('.x-btn-navbar, .x-btn-navbar:hover').css("color","#FFF");
		}
	});
});

Regretfully custom JS coding is beyond the scope of our support. You may need to hire 3rd party developer to be able to accomplish the header behavior that you want.

Thank you for your understanding.

[cvdw]

Hi,

Yes, but I want to switch to the latest version of PRO and I was said to rebuild this header in the header builder. I want to get rit of this custom JS and I was told by support I can make this happen with the header builder.

How is the Trigger Selector working in the header builder? I read all docs and watched the video’s about it and as far as I can see, I must be able to accomplish the same result with this Trigger Selector.

In this video https://youtu.be/jEZ8B7E1wgE at 4:55 the are showing how to get the Trigger Selector working from some point but I can’t get this working.

Here https://bubbels.nl/wp/pizza/ I followed exactly the video https://youtu.be/jEZ8B7E1wgE but the Trigger selector is not working…

And a second question: The mobile menu has to come up after the hamburger and close after clicking a menu item. All the headers in the design cloud only close after the X button. Thats very strange to use… How can the mobile menu close after clicking?

[ruenel]

Hello @cvdw,

You will have to adjust the Trigger Offset because at the moment, I believe that there is an issue between the Trigger Selector and Trigger Offset option. If you have your settings like this,

where 1200 is the estimate height of the slider. When one of the Trigger option is true, the will display. As for the mobile Menu, there is also an issue with it. Our developers have already looked into this issue and will be releasing for a fix anytime soon.

Best Regards.