Docs

[morganthx]

Hello,

I would like to create inverted logo style similar to this website.

I am using Integrity with Revolution slider above navigation. I tried to implement this technique both in revolution slider itself and the header files of integrity by it only leaves a gap.

Can you please help me out regarding the same? I am not using cornerstone on this page.

Regards
morgan

[Christopher]

Hi there,

Please select ‘fixed top’ position under Customize -> Header.
Then add following code in Customize -> Custom -> CSS :

h1.site-title {
    position: fixed;
}

Hope it helps.

[morganthx]

This reply has been marked as private.

[Christopher]

Hi there,

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

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-brand img').attr("src","http://gpmc.hatterinnovations.com/wp-content/uploads/2016/05/gpmc_logo_light.png");
		} else {
			$('.x-brand img').attr("src","http://gpmc.hatterinnovations.com/wp-content/uploads/2016/05/gpmc_logo_dark.png");
		}
	});
});

Hope it helps.

[morganthx]

I tried that code, it only changes the color of the logo and doesnt make it sticky top, what i am looking for is continuity like the logo should stick to the top of the position and as soon as it enters the navbar it should change color or load different image. like it happens in http://conranandpartners.com

Thank you!
Regards

[Paul R]

Hi,

Please change the code provided above with this.

jQuery(document).ready(function($){
  var $sliderheight = $('.x-slider-container.above').outerHeight();

	$(window).scroll(function(){
                 
		if ($(this).scrollTop() >= $sliderheight) {
			$('.home .x-brand img').attr("src","http://gpmc.hatterinnovations.com/wp-content/uploads/2016/05/gpmc_logo_light.png");
		} else {
			$('.home .x-brand img').attr("src","http://gpmc.hatterinnovations.com/wp-content/uploads/2016/05/gpmc_logo_dark.png");
		}
	});
});    

Hope that helps.

[morganthx]

This reply has been marked as private.

[Nabeel A]

Hi again,

Further customization 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.

[morganthx]

I believe all the things i have been provided on this forum are related to custom development but sticky logo to the top is more of a theme support related question. You can at least point me in the direction what css to edit to make it stick to top.

Best Regards

[Rue Nel]

Hello There,

Your example url is not using X. They have two versions of headers (one with just a logo and the other is with the logo nad menu) which would switch and be hidden when you scroll upon the page. In your case, you can make use of the following steps as an alternative.

1.] Please edit the page in Cornerstone.
2.] Go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){
  $('<a href="http://gpmc.hatterinnovations.com/" class="x-brand img" title="Welcome"><img src="http://gpmc.hatterinnovations.com/wp-content/uploads/2016/05/gpmc_logo_dark.png" alt="Welcome"></a>').appendTo( $('.x-slider-container.above') );
})(jQuery);

3] And please insert the following custom css in the settings tab, Settings > Custom CSS

.x-slider-container.above .x-brand.img {
    position: absolute;
    top: 10px;
    left: 30px;
    z-index: 1050;
}

Please let us know if this works out for you.

[Author]

Posts