Cornerstone: Inline Navigation Fixed?

[lowlandet]

Hi,

I am doing a product page: http://hardi360.com/hardi2018/selfpropelled/alpha-evo/

And I would like to have the inline navigation element from Cornerstone to be fixed so it follows down when you user scrolls past it.

[thai]

Hi There,

• Please add the following code under X > Theme Options > JS:

jQuery(function($) {
	$(window).scroll(function(){
        if($(window).scrollTop() >= $(".el10.x-section").offset().top ){
        	$(".el10 ul.x-menu").addClass('x-menu-fixed');
        } else {
        	$(".el10 ul.x-menu").removeClass('x-menu-fixed');
        }
    });
});

• Then add the following CSS under X > Theme Options > CSS:

ul#menu-alpha-evo.x-menu-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999999;
}

.el10.x-section {
    z-index: 99999 !important;
}

Let us know how it goes!

[lowlandet]

Works like a charm!

Only issue is that the menu goes full width when I scroll past it.

[thai]

Hi There,

Please change the custom CSS to this:

ul#menu-alpha-evo.x-menu-fixed {
    position: fixed;
    top: 0;
    left: 50%;
    width: 88%;
    background-color: #fff;
    z-index: 999999;
    margin-left: -44%;
    max-width: 1440px;
}
.el10.x-section {
    z-index: 99999 !important;
}

Regards!

[lowlandet]

Thanks but now the menu is aligned to the left

[paul.r]

Hi,

Please change css code to this.

ul#menu-alpha-evo.x-menu-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999999;
    max-width:1200px;
}

.el10.x-section {
    z-index: 99999 !important;
}