[module] PrestaShop 1.7 / 1.6 sticky header - FREE

[vekia 8,838]

Sticky header in PrestaShop 1.7 / 1.6

this is absolutely free module for PrestaShop 1.7 / 1.6 that creates sticky header in "classic" and "default bootstrap" themes and in all themes based on these templates.

Once you will scroll page a lttle down - module will stick header with menu to top edge of the browser window.

you can see demo here: check how sticky header works

 

 

 

 

download links below.
Remember to download correct version!

fixedheader16.zip - for prestashop 1.6
fixedheader17.zip - for prestashop 1.7

 

 

 

fixedheader17.zip

fixedheader16.zip

[tar.tarek 3]

Vekia - do you have such module for PS 1.6?

[vekia 8,838]

I can develop it but it will work with "default bootstrap" theme and themes based on this theme,

its hard to develop universal solution because each theme is different

[tar.tarek 3]

default bootstrap is sufficient

[Puriom 2]

Τhank you so much!

[nicopaulangelo 0]

Hello!

Could it work with Prestashop 1.6 ?

[vekia 8,838]

Hello!

 

Could it work with Prestashop 1.6 ?

 

hello

it is for prestashop 1.7 currently

[vekia 8,838]

Hello!

 

Could it work with Prestashop 1.6 ?

 

 

default bootstrap is sufficient

 

released version for 1.6.x for themes based on default-bootstrap 

enjoy :-)

[gray 7]

I am using PS1.7

 

Any ideas how I can make header-nav sticky, as well as the header-top ?

 

As this module only does header-top.

 

Better still maybe an option on the setup screen for me to select either or both.

[vekia 8,838]

currently module does not allow to select what elements will be a part of "sticky header"

header-nav + header-top are too big to create sticky heading feature so i decided to allow to stick only header-top.

[ANGELO Vintage 10]

I still using a default-bootstrap modified theme and for some reason something not work:

 

https://gyazo.com/cfc9772f01441c8f8f642a1f79b2087a

 

when scrollign the menu disappear completely:

 

https://gyazo.com/45cf9902d89575ce60565ec5ca599983

Edited March 27, 2017 by ANGELO Vintage (see edit history)

[happohiken 0]

Hello, first of all thank you very much for this great module, is very useful.

Unfortunately, it does not work fine in my 1.6.1.7 prestashop, it is conflicting with ajax cart popup.

When I add to cart a product from the category view, the ajax popup does not appear or appears partially out of view. It does not happen when I add to cart from the product view.

 

As soon as I deactivate the module the ajax cart works fine again.

 

It would be great if you can fix this, as it is a very good module that I believe can boost conversions. While I wait hopefully for your solution, I'm going to try to solve it by myself, if I'm succesful I'll post it here.

 

Thank you, best regards,

[happohiken 0]

More info about that. It happens also when I add to cart from the product view, but it does not disturb as much as in category view because the offset of the ajax popup is relative to the top of the page.

 

I've found a workaround, it is not perfect but it works.

 

Add the following lines to fixedheader.css:

 

#layer_cart {
  position:fixed!important;
  margin: 5% auto!important;
  top: 10px!important;
  left: 10px!important;
  right: 10px!important;
  bottom: 10px!important;
  overflow:auto!important;
  height:100%!important;
}

 

Best regards,

[flyman1664 2]

More info about that. It happens also when I add to cart from the product view, but it does not disturb as much as in category view because the offset of the ajax popup is relative to the top of the page.

 

I've found a workaround, it is not perfect but it works.

 

Add the following lines to fixedheader.css:

 

#layer_cart {

  position:fixed!important;

  margin: 5% auto!important;

  top: 10px!important;

  left: 10px!important;

  right: 10px!important;

  bottom: 10px!important;

  overflow:auto!important;

  height:100%!important;

}

 

Best regards,

Thank you for the tip, works well!

 

 

I still using a default-bootstrap modified theme and for some reason something not work:

 

https://gyazo.com/cfc9772f01441c8f8f642a1f79b2087a

 

when scrollign the menu disappear completely:

 

https://gyazo.com/45cf9902d89575ce60565ec5ca599983

 

To get the your Menu module visible you have to modify fixedheader.css by replacing

.omg_img_scrolled #block_top_menu {
    display:none!important;

and paste this

.omg_img_scrolled #block_top_menu {
   padding:0px!important; 
}

Vekia

Could you please take a look to the problem issued by happohiken?

 

I'm also facing this issue and I've used his workaround to fix it meanwhile.

Thank you for the good job and I really appreciate your modules!

[Club Vapea! 1]

Hi Vekia,

I have modified my classic theme colors etc. but it remains the same theme, but the module doesnt work for me.. Any solution?

Thanks,

B

[Club Vapea! 1]

Hi Vekia,

I have modified my classic theme colors etc. but it remains the same theme, but the module doesnt work for me.. Any solution?

Thanks,

B

 

Hi, 

I have installed the module, I use classic theme but it doesnt work.. nothing happens. Please help Vekia?

 

currently module does not allow to select what elements will be a part of "sticky header"

header-nav + header-top are too big to create sticky heading feature so i decided to allow to stick only header-top.

[w3mx 0]

Alguien sabe si en la versión 1.7 hay forma de habilitar n TOP BANNER gratuitamente como hasta la versión 1.6?

 

o en su defecto personalizar un link en el menú global para mandar a un sitio externo?

 

saludos.

[robbie007 3]

Hi Vekia, how to offset???? Have some problems with scrollto links.

 

$(document).ready(function () {

    $(window).scroll(function () {

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

            $('#header').addClass("header_omg_im_scrolled");

        } else {

            $('#header').removeClass("header_omg_im_scrolled");

        }

    });

});

[Drens 3]

It works awesomely but in checkout, it bugs and moves up and down like crazy. Can we find a solution?

 

Btw, vekia u are awesome.

[vkmaxx 3]

I tried to modify it to make PS 1.6.x menu only sticky header but I can't get rid of jerky move when JS code kick in and the header dissapears.
Video illustrating the problem:

https://www.dropbox.com/s/uw1pn91f6769t9l/fixed_scroll.mp4?dl=0

 

Later I will try to move head out of screen instead of making in dissapear.

[vkmaxx 3]

I was able to make it work without nasty jump in motion, you can check it @ prezentyhurt.pl

I will try to make a module out of it.

[jhonzz007 2]

Thank you Vekia for this awesome module

[toyshokan 1]

Great Module. Thank you!

[vekia 8,838]

new version of fixed header is ready!

- added improvements to module usage in prestashop 1.7. When module is installed and enabled "quick product preview" is not covered by fixed menu anymore.

[b-w-p 0]

Hello, I looked for this type of module and congratulate you.
I have however modifications has to make on my site and I installed him and uninstalled.

Since the deinstallation, my site slowed down a lot and by making the gmetrix test these elements appeared,

even after deinstallation and slows down him(it) a lot.

gmetrix : https://gtmetrix.com/reports/b-w-p-distribution.com/STxuADw2

Elements of the slowing down:

- https://fls-na.amazon.com/1/batch/1/OP/A53RDEWN57UU5:257-7961038-4696744:VEY4BBNXBB3Z

• https://static-eu.payments-amazon.com/OffAmazonPayments/de/lpa/js/Widgets.js?sellerId= (20 minutes)
• https://eu.account.amazon.com/lwa/js/sdk/login1.js (1 hour)

And as you will see him(it), I have nothing in contact with amazon on my site, thus arrived with the module!
Thank you for your return

Ps: French translates with Reverso, thus if problems to announce me it.

[vekia 8,838]

On 11/3/2017 at 8:53 AM, b-w-p said:

Hello, I looked for this type of module and congratulate you.
I have however modifications has to make on my site and I installed him and uninstalled.

Since the deinstallation, my site slowed down a lot and by making the gmetrix test these elements appeared,

even after deinstallation and slows down him(it) a lot.

gmetrix : https://gtmetrix.com/reports/b-w-p-distribution.com/STxuADw2

Elements of the slowing down:

- https://fls-na.amazon.com/1/batch/1/OP/A53RDEWN57UU5:257-7961038-4696744:VEY4BBNXBB3Z

• https://static-eu.payments-amazon.com/OffAmazonPayments/de/lpa/js/Widgets.js?sellerId= (20 minutes)
• https://eu.account.amazon.com/lwa/js/sdk/login1.js (1 hour)

And as you will see him(it), I have nothing in contact with amazon on my site, thus arrived with the module!
Thank you for your return

Ps: French translates with Reverso, thus if problems to announce me it.

 

module "fixed headeR" is not related in any part to any kind of amazon scripts. 

the problem you have is not connected to this free module in any part.

[vekia 8,838]

i updated the module.

added improvements related to module usage in prestashop 1.7.x, 
now when "quick preview" of product is active (modal window) - fixed header does not cover it, so "close" button for modal window is clickable again.

[microblog 1]

great plugin !

thx a lot

 

just a question...

possible to a en effect when the sticky is activing ? (example: fade)

 

like this :

http://modules.finalmenu1.marpaweb.eu/

Edited November 22, 2017 by microblog (see edit history)

[Oktay 6]

Hi Vekia,

Thanks for this great Module. It' s simple, but very usefull. 

 

[Fabio Intermoia 2]

hi I should block the following selector:
#header .nav
#header .container .row
#block_top_menu

where can I, if I can, take action to make this change?

[Daniele0884 2]

On 6/11/2017 at 2:58 PM, vekia said:

i updated the module.

added improvements related to module usage in prestashop 1.7.x, 
now when "quick preview" of product is active (modal window) - fixed header does not cover it, so "close" button for modal window is clickable again.

Hi, the module work well, but I have found a problem, for my PS.1.7.

In small screen view (mobile), when I open top bar menu categories (on top to left), if I have the menu with a long list of categories and subcategories, when i scroll down for view last categories, i can not scroll down the menu, for to view last categories down, because it is fix with header.

Any solution?

Thanks

Edited August 18, 2018 by Daniele0884 (see edit history)

[sytes 0]

does this work with all themes ? we need it for a client using a customised theme he bought on a marketplace

[Leonellopg 2]

On 6/3/2017 at 9:17 AM, vekia said:

Sticky header in PrestaShop 1.7 / 1.6

this is absolutely free module for PrestaShop 1.7 / 1.6 that creates sticky header in "classic" and "default bootstrap" themes and in all themes based on these templates.

Once you will scroll page a lttle down - module will stick header with menu to top edge of the browser window.

you can see demo here: check how sticky header works

 

 

 

 

download links below.
Remember to download correct version!

fixedheader16.zip - for prestashop 1.6
fixedheader17.zip - for prestashop 1.7

 

 

 

fixedheader17.zip

fixedheader16.zip

 

Thank you for the module!! =)

[Spaco.pl 0]

On 21.08.2018 at 10:02 PM, sytes said:

does this work with all themes ? we need it for a client using a customised theme he bought on a marketplace

I have the same issue, someone know how to solve it?

[sytes 0]

Any update op ?

[blacknyellow 0]

For the ones who only want to use CSS

add these lines in your custom css:

#header{
    background: #ffed00;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .11);
}
#wrapper{margin-top: 100px;}

and this is what it looks like: https://www.blacknyellow.nl

[994830_1508427849 0]

@vekia

Thank you very much for this module.

I have a suggestion, can you add the feature to reduce the logo size when scrolling down the same way as https://www.instagram.com/ did (on their web version not app).

Thank u.

[Prestashop user 0]

On 8/18/2018 at 3:34 PM, Daniele0884 said:

Hi, the module work well, but I have found a problem, for my PS.1.7.

In small screen view (mobile), when I open top bar menu categories (on top to left), if I have the menu with a long list of categories and subcategories, when i scroll down for view last categories, i can not scroll down the menu, for to view last categories down, because it is fix with header.

Any solution?

Thanks

Hi,

Have you found a solution to this problem ?

Thanks.

Best regards

 

[jeti20 0]

ok

Edited February 25 by jeti20 (see edit history)

[Georgy Goshin 0]

Is there a way to place a "Sign in" and "Cart" in the frozen menu or make that raw sticky?

[grigorevlad 2]

On 2/25/2019 at 3:29 PM, Prestashop user said:

Hi,

Have you found a solution to this problem ?

Thanks.

Best regards

 

Also searching for a solution to this

[Jean Francois G 148]

Don't work with prestacrea 1.7 theme.

however the menu is dependent on the default menu. But as it is improved there may be a problem.
It does not even fix the header at all.

[altaiir123 1]

Hi guys.

If someone have problem with jump after scroll-down form top on Prestashop 1.7.6 using this module (Fixed sticky header by Vekia) I managed to find the solution.

To be specific, this problem occurs exactly when fixed header start to work. The site is being instantly scrolled down creating this annoying jump. This work in both sides, so if you will scroll up to top it will jump also.

To fix this you will need to modify two files: fixedheader.js and fixedheader.css located in: modules/fixedheader and follow steps below.

Inside fixedheader.js replace 'body' with '#wrapper' in lines 16 and 19. The final code should look like this:

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            $('#header').addClass("header_omg_im_scrolled");
            $('#wrapper').addClass("omg_im_fixed");
        } else {
            $('#header').removeClass("header_omg_im_scrolled");
            $('#wrapper').removeClass("omg_im_fixed");
        }
    });
});

Next, open fixedheader.css, scroll to the bottom and replace section:

@media (min-width: 576px){
    .omg_im_fixed .modal-dialog {
        margin-top:130px!important;
    }
}

with this code:

@media (min-width: 576px){
    #wrapper.omg_im_fixed {
        padding-top:130px!important;
    }
}

It should get rid of that annoying jump after scroll-down from top and back to top. Keep in mind this is not official fix, so might not work for everyone. Feel free to try, I hope I helped someone

Edited August 29 by altaiir123 (see edit history)

[grigorevlad 2]

Hi,

Thanks! Very nice of you to post solution.

[Prestashop user 0]

Hi,

Thank you for posting your solution. For my part I replace padding-top:130px!important by margin-top:130px!important.

[Martina.Tom 0]

Hi Vekia,

thank you very much for this module, it is very useful.

Is it possible to switch off it for mobile version?

Thanks,

 

Martina

[altaiir123 1]

You can switch off mobile version of every module from backoffice.

Just press the arrow next to configure button in module manager and select "disable mobile". 

[Martina.Tom 0]

2 minutes ago, altaiir123 said:

You can switch off mobile version of every module from backoffice.

Just press the arrow next to configure button in module manager and select "disable mobile". 

Thank you very much! I thought that it will be more difficult I´ve never need this function before.

[Ocul 1]

Hi!

Thanks for this module, its great, but, i have a problem, when I slide, I download the menu along with the carousel of images too, how can I solve this?

Thanks and sorry for my english.