Stick horizontal menu to top of page

[kornfr333k]

Hi, 

 

i would like to know how i can make the default horizontal menu stick to the top of the page after scrolling down. i managed to do that in 1.5 by adding a simple code in the tpl file but that doesn't work in here. 

 

i really need to have the menu visible at all times during site surfing since i will not use left or right columns.

 

i am referring to the default prestashop theme and the defaul prestashop horizontal menu, so there won't be any confusions to other modules.

 

Can it be done?

 

Thanks

[NemoPS]

Add this to global.css

 

#block_top_menu {

1. position: fixed;
2. top: 0;
3. left: 0;

}

 

 

 

You will have to adjust the item's position depending on your needs

[kornfr333k]

 

Add this to global.css

 

#block_top_menu {

1. position: fixed;
2. top: 0;
3. left: 0;

}

 

 

 

You will have to adjust the item's position depending on your needs

 

 

 

Hello, thanks for the answer, unfortunatelly using css to do that is not helping because the menu is not located at the top of the page by default. It is located further down, and i need it to stick to the top page to prevent overscrolling.

 

On 1.5 version, i managed to do that on the megamenu module by adding a script to the .tpl file:

 

</head>

 

<script type='text/javascript'>

 

$("document").ready(function($){

    var nav = $('#main-menu-container');

 

    $(window).scroll(function () {

        if ($(this).scrollTop() > 200) {

            nav.addClass("f-nav");

        } else {

            nav.removeClass("f-nav");

        }

    });

});

 

</script>

</head>

 

Unfortunatelly that does not work on the default 1.6 menu, and i even tried the .js scripts from the other posts. i must be doing something wrong.

 

 

you can find the working example on the current website i have, on Prestashop 1.5 with the functional working code frome above:

 

http://www.dkbike.ro

 

Below you can find the link to my beta 1.6 version, and the default horizontal menu to which i want to make the modification.

 

http://www.dkbike.ro/betadk/

[Paulito]

Hello

 

Have a look  at adding this code to:

 

public_html/Your Shop/themes/default-bootstrap/js/modules/blocktopmenu/js/hoverIntent.js

 

 

 

var sticky = $('.sf-menu').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px'});
} else {
$('.sf-menu').css({position: 'static', top: '0px'});
}
}); 

 

For the full topic go to:

http://www.prestashop.com/forums/topic/259734-solved-does-any1-know-how-to-make-the-top-horizontal-menu-floating/

 

With thanks to sooroos + rumit

 

I have just tried it, see link below

http://adultskunk.co.uk/en/?live_configurator_token=8f63a8939f73796696b9798dd0d21785&id_shop=1&id_employee=1

 

Paul

[kornfr333k]

Hello

 

Have a look  at adding this code to:

 

public_html/Your Shop/themes/default-bootstrap/js/modules/blocktopmenu/js/hoverIntent.js

 

 

 

var sticky = $('.sf-menu').offset().top;

$(window).scroll(function(){

if( $(window).scrollTop() > sticky ) {

$('.sf-menu').css({position: 'fixed', top: '0px'});

} else {

$('.sf-menu').css({position: 'static', top: '0px'});

}

}); 

 

For the full topic go to:

http://www.prestashop.com/forums/topic/259734-solved-does-any1-know-how-to-make-the-top-horizontal-menu-floating/

 

With thanks to sooroos + rumit

 

I have just tried it, see link below

http://adultskunk.co.uk/en/?live_configurator_token=8f63a8939f73796696b9798dd0d21785&id_shop=1&id_employee=1

 

Paul

 

 

It works!

 

thanks for the quick reply!