Sticky Main Menu

as per title, how can this be achieved?

Try this

https://store.cart-power.com/cs-cart-floating-menu-add-on.html

or this

http://www.alt-team.com/cs-cart-floating-blocks-add-on.html

as per title, how can this be achieved?

If you are up to you can do this for free

Folow the guide (besure to have my Changes addon installed and active)

Create a new folder in js/addons called /my_changes.

Add a new file named sticky.js and add the following content

$(function(){
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 104) {
            $('.top-menu-grid').addClass('stickytop');
        }
        else {
            $('.top-menu-grid').removeClass('stickytop');
        }
    });
});

After that head into your theme for example if you use responsive theme go to

design/themes/responsive and in the css/addons open a new folder named /my_changes.

Add the file named sticky.ccs and add following content

.stickytop {
    position: fixed !important;
    padding-top:0!important;
    top: 0;
    left:0;
    z-index: 1000;

}
.top-menu-grid {
overflow: visible !important;
padding-top: 0;
}
.fullwidth {
display: block !important;
left: 50% !important;
;
position: relative !important;
width: calc(100vw) !important;
}
.stickytop .ty-menu__items {
margin: 0 auto!important;
max-width: 1200px!important;
}
@media (max-width: 767px) {
.stickytop {
position: relative !important;
}
}

Add another file here named sticky.less and add the following content

.stickytop {
    background:@menu;
}

After that again in the theme folder go to folder templates/addons this time, and create the my_changes folder if its not already there.

in there open the folder /hooks and in that the folder /index

you need now to create 2 files

a. the scripts.post.tpl and add the follwoing content

{script src="js/addons/my_changes/sticky.js"}

and the file styles.post.tpl with the following content

{style src="addons/my_changes/sticky.css"}
{style src="addons/my_changes/sticky.less"}

You only need to retain the class name of the Grid that houses your main menu block, to "top-menu-grid" in order for this to work.

Done!

Clean your CS-Cart Cache (admin.php?cc&ctpl) and the menu bar will stick to top each time you roll more than a page content.

Hope you find this usefull

Fotis.

If you are not up to creating this you can download it for free from our store.

If you are not up to creating this you can download it for free from our store.

Thank you Fotis! Much appreciated.