How to Make Your Main Menu Scroll With the Page in Prestashop 1.6 – 1.7

How to Make Your Main Menu Scroll With the Page in Prestashop 1.6 – 1.7

Navigation is one of the most important components of any store. Usually, to access the navigation menu on a website the user has to scroll up to the top of the page. But the sticky navigation menu is a much better and convenient solution.

Prestashop 1.6

In this article I will describe how to create such a sticky menu in the default Prestаshоp 1.6 theme on the basis of the default module Top horizontal menu (blосktоpmenu). 

1

First we fix the visual part of the menu: we will set the menu width to 100% to completely fit the browser window. Then set the background, transparency, the lower border and then stick the menu, so when scrolling there will be added the .scroll class.

2

themes/default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css

You can adjust the color and transparency in this property to match the design of your website. background: rgba(246, 246, 246, 0.8);

To position the menu at the very edge of the browser window we need to modify this file: themes/default-bootstrap/css/global.css

Make a top padding between header and the menu  and also add the bottom padding:

themes/default-bootstrap/css/global.css

The last thing is to remove the menu background because it already uses the page background. Then align the menu to the logo.

themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

3

4

In the menu template add the class .container:

themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl

New:

The last step is to connect a small script to let our menu move.

The menu scrolling is also compliant with mobile devices and tablets.

5

6

The only thing is to add background to the dropdown menu for mobile

themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

7

You can also download the zip file with the modified default files.

You can check the demo here.

Prestashop 1.7

In Prestashop 1.7 header layout is different from Prestashop 1.6, that’s why the method described above will vary a little. But first things first. In order to get the menu fixed when scrolling, it’s necessary to add following styles in the file “/themes/classic/assets/css/theme.css”:

Moreover, the next script should be also added (for example, in the file “/themes/classic/assets/js/custom.js”):

The result will be like this:

How to Make Your Main Menu Scroll With the Page in Prestashop 1.6 - 1.7 1

Actually, we’ve achieved our goal. But the menu will be scrolled only for resolution 768 pixels and more. In other words, on mobile devices, the menu will not be scrolled. It is connected with the fact that in Prestashop 1.7 there are two menu blocks: block with id=”_desktop_top_menu” which is for the menu on desktops and block with id=”_mobile_top_menu” which is for the menu on mobile devices. In order to make a menu fixed in the header when scrolling on mobile devices, we need to get the header fixed. For this reason, we should add following styles (similarly, in the file “/themes/classic/assets/css/theme.css”):

As a result, on mobile devices it will look that way:

How to Make Your Main Menu Scroll With the Page in Prestashop 1.6 - 1.7 2



35 comments

  1. Liviu,

    In the default mobile theme when you open the drop down menu the content is moved down, in this article the menu laid over the content.

  2. Thank you Tatiana for the files – it made my life very easy. I am new to prestshop and would like to keep in touch with you for future questions… please send me an email.

  3. Hello , Thanks Tatiana

    I think i have the same problem as Liviu.

    In Mobile mode when user click on category,the content outside the screen is not scrollable.

    I fixed this problem with this change in blocktopmenu.css :

    @media (max-width: 767px) {
    .scroll { position: absolute !important; }
    }
    @media (min-width: 767px) {
    .scroll { background: rgba(22, 78, 152, 0.8)!important; position: fixed !important; top: 0;}
    }

    Thank you

  4. hello mam,First I would like to thank you for your great Article. it’s really a wonder full expreiance to go with.but mam i have one question that it is possible if i want sticky effect only in desktop browsers but not on palm device like mobile,Tab. is there any code or something that can help beginners entrepreneurs who has doesn’t much money to buy such Modules.

  5. Hello Tatiana,
    I’m back with an observation : when I made changes regarding “header .row {position: static;} /*old style position: relative;*/”, there is a change of position on and is no longer fit the middle of the screen, but basically it appears in the top right corner of the screen. In this context practical results an unpleasant visual experience for the customer with a possible abandonment of orders. I noticed it a few weeks ago, also in your demo example and now I’m back with the request if it is possible to reposition this div.
    (The link to demo example is now the broken: http://belvg.net/tatiana/prestashop/demo/index.php).
    Many thanks in advance.
    Liviu.

  6. The js code goes in /theme-folder/js/global.js

    $(document).ready(function(){
    var start_pos = $(‘#block_top_menu’).offset().top;
    $(window).scroll(function(){
    if ($(window).scrollTop()>=start_pos) {
    if ($(‘#block_top_menu’).hasClass()==false) {
    $(‘#block_top_menu’).addClass(‘scroll’);
    }
    } else {
    $(‘#block_top_menu’).removeClass(‘scroll’);
    }
    });
    });

  7. Hi I am new to Prestashop. I am using the default bootstrap in prestashop and created a child theme for that. I also want to make my menu transparent and sticky same as this one but i cannot make it like that. What i did so far is to copy and paste the script mention here which it doesn’t work. I also tried putting the zip file in my child theme that you can download here and still it doesn’t work, and lastly I don’t know how to edit the menu width to 100%, background, transparency, .scroll class and etc. Please i need help. Thanks in advance.

  8. In prestashop 1.6.1.5 doesnt work. The menu items are completely at the left of the screen and the menu is not floating

  9. Ребята! Как отключить это в мобильной версии??????
    Помогите пожалуйста!!

  10. andrewandrew,

    Спасибо за интерес к моей статье! Убрать скролинг меню на мобильном устройстве, можно с помощью @mediа запросов. К примеру, можно определить устройство с максимальным разрешением 767px и для него установить определённое свойство. Медиа-запросы ограничивают ширину макета и при достижении этого значения уже применяется другой стиль.

    В файле:

    themes/default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css

    можно написать медиа запрос

    Если ширина не будет превышать 767px, то меню будет оставаться статичным, а скролится уже на устройствах выше 767px.

  11. Спасибо огромное Вам за ответ.
    Но есть одна проблема, я обновил мой магазин до версии 1.6.1.8 и это код перестал работать, сможете снова помочь в этом??? очень надеюсь на вас

  12. Hi Tatiana,
    Thanks for the code, it helped. But, I have a big logo and want to get rid of the logo when I scroll. How would I do?
    Best regards,
    Peter

  13. Hi Titianda,
    thanks for share the solution.
    I just need the files because the link is broked. Can you send it to me, please?
    Thanks a lot!

  14. Hi Arshad,
    Everything should work properly. Could you please check the following points in the ..modules/blocktopmenu/blocktopmenu.tpl template:

    1) There is a wrong class in menu of your website

    , it’s necessary to replace sf-contener class name – http://prntscr.com/ecdoqa

    2) js wrong placement – the script should be placed in

    http://prntscr.com/ecdptg

    If you fix these issues, you will get this result – http://prntscr.com/ecdrge

  15. Hi Arshad,
    Please try to flush the cache in Prestashop Admin Panel (Advanced Parameters > Performance)

  16. Hello.
    I’m using prestashop 1.6.1.12 and all is working except that in mobile if you have a menu with lot of subcategories and you deploy all of them and the they go out of the screen in the bottom side, you can’t scroll the menu to see those other buttons.

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *