Jump to content

[module] PrestaShop 1.7 / 1.6 sticky header - FREE

vekia

By vekia ,
in Free Modules & Themes

 Share

Recommended Posts

vekia Apprentice

vekia

Posted
Posted

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

 

fixed-sticky-header.png

 

prestashop-sticky-header-free.png

fixed-header-prestashop16-free.png

 

 

download links below.
Remember to download correct version!

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

 

 

 

fixedheader17.zip

fixedheader16.zip

  • Like 4
  • Thanks 2

Share this post

Link to post
Share on other sites
  • 2 weeks later...
gray Enthusiast

gray

Posted
Posted

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.

Share this post

Link to post
Share on other sites
vekia Apprentice

vekia

Posted
Posted

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.

  • Like 1

Share this post

Link to post
Share on other sites
  • 1 month later...
happohiken Newbie

happohiken

Posted
Posted

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,

Share this post

Link to post
Share on other sites
happohiken Newbie

happohiken

Posted
Posted

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,

Share this post

Link to post
Share on other sites
  • 5 weeks later...
flyman1664 Newbie

flyman1664

Posted
Posted

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!

  • Like 1

Share this post

Link to post
Share on other sites
  • 2 weeks later...
Club Vapea! Newbie

Club Vapea!

Posted
Posted

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.

Share this post

Link to post
Share on other sites
w3mx Newbie

w3mx

Posted
Posted

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.

Share this post

Link to post
Share on other sites
  • 3 weeks later...
robbie007 Newbie

robbie007

Posted
Posted

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");
        }
    });
});

Share this post

Link to post
Share on other sites
  • 1 month later...
b-w-p Newbie

b-w-p

Posted
Posted

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

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.

Share this post

Link to post
Share on other sites
vekia Apprentice

vekia

Posted
Posted
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

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.

Share this post

Link to post
Share on other sites
vekia Apprentice

vekia

Posted
Posted

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.

Share this post

Link to post
Share on other sites
  • 3 weeks later...
  • 4 months later...
  • 5 weeks later...
  • 3 months later...
Daniele0884 Newbie

Daniele0884

Posted
Posted (edited)
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 by Daniele0884 (see edit history)
  • Like 1

Share this post

Link to post
Share on other sites
  • 1 month later...
Leonellopg Newbie

Leonellopg

Posted
Posted
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

 

fixed-sticky-header.png

 

prestashop-sticky-header-free.png

fixed-header-prestashop16-free.png

 

 

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!! =)

Share this post

Link to post
Share on other sites
  • 2 weeks later...
  • 2 weeks later...
  • 1 month later...
blacknyellow Newbie

blacknyellow

Posted
Posted

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

Share this post

Link to post
Share on other sites
  • 2 months later...
  • 4 weeks later...
Prestashop user Newbie

Prestashop user

Posted
Posted
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

 

Share this post

Link to post
Share on other sites
  • 1 month later...
  • 1 month later...
  • 1 month later...
  • 2 months later...
altaiir123 Newbie

altaiir123

Posted
Posted (edited)

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 by altaiir123 (see edit history)

Share this post

Link to post
Share on other sites
  • 2 weeks later...
Martina.Tom Newbie

Martina.Tom

Posted
Posted
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.

Share this post

Link to post
Share on other sites
  • 2 weeks later...
  • 3 months later...
viliera Apprentice

viliera

Posted
Posted
On 3/6/2017 at 4:17 PM, 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

 

fixed-sticky-header.png

 

prestashop-sticky-header-free.png

fixed-header-prestashop16-free.png

 

 

download links below.
Remember to download correct version!

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

 

 

 

fixedheader17.zip

fixedheader16.zip

Hello vekia,

it is an excellent module that works very well in 1.7 but I would like to know if I can activate only for the mobile version, because my template already has a fixed menu but only for a computer device and for the mobile phone not.

This module has worked very well for me on mobile device but then it is very ugly on the computer, because there are two scripts that act almost the same way.

I hope I explain it well.

I would appreciate your help.

Thank you.

Best regards

Share this post

Link to post
Share on other sites
  • 1 year later...
  • 4 weeks later...
Dp. Newbie

Dp.

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

Hi,

Have you found a solution to this problem ?

Thanks.

Best regards

 

Same here. Any solution in the meantime? Or modules that have the same function but work?

Share this post

Link to post
Share on other sites
  • 3 months later...
  • 8 months later...
vilarinho Newbie

vilarinho

Posted
Posted (edited)
On 8/29/2019 at 7:58 PM, altaiir123 said:

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 :)

 

Hi guys!

@vekia thank you for this module!
and @altaiir123 excellent job on the work around! thank you too for your contribution. 

Well guys I've been trying to find a way to fix this bug related with the jump(flick) that altaiir123 mentioned, and the solution given by altaiir123, wasn´t working for me.
Now, I really think I got it done and I've found a fix for another bug related with the Header remaining over content that should be over the header (modal.dialog I think) (when product is hadded to cart or product quick view, not allowing access to the exit button on mobile - fixed).

Header over content

 

So for FixedHeader by @vekia version 1.4.1, downloaded from MyPresta - Prestashop Fixed sticky header, on Prestashop 1.7.8.2, Classic Theme, If you want a smoother transition for your fixed/sticky header and header/modal.dialog overpositioning fix, this is the solution I've found (hope it will help others, like helped me):

Like @altaiir123's solution, to fix this you will need to modify these two files: fixedheader.js and fixedheader.css located in: modules/fixedheader to the code given bellow.

Inside fixedheader.js replace 'body' with '#wrapper' in lines 16 and 19, and change .scrollTop condition to >= 1.
The final code should look like this:

Quote

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() >= 1) {
            $('#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, and:

On the first "@media",

  • Replace "min-width: 786px" with "min-width: 768px"
  • Replace z-index value of "9999" with "999" (this will fix the modal.dialog/header overlay)
  • Add "transform: translateY(-50px);        
             -webkit-transform: translateY(-50px)
             transition:transform .5s;" and
  • Exclude this:
    Quote

        #header.header_omg_im_scrolled .header-nav {
            display: none;
        }

 

  • Replace "padding-top: 30px;" with "padding-top: 20px;", 
  • Add this:
    Quote

    #wrapper.omg_im_fixed {
            padding-top:145px!important;
        }


On the second "@media",

  • Replace "max-width: 785px" with "min-width: 767px"
  • Replace z-index value of "9999" with "999" (this will fix the modal.dialog/header overlay)
  • Add this:
    Quote

    #wrapper.omg_im_fixed {
            padding-top:168px!important;
        }

 

The last "@media", "(min-width: 576px)", simply remove the code, won't be needed.

It should look like this:

Quote

@media (min-width: 768px) {
    #header.header_omg_im_scrolled {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 999;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .11);
        transform: translateY(-50px);        
        -webkit-transform: translateY(-50px);
        transition:transform .5s;
    }

    #header.header_omg_im_scrolled .header-top {
        padding-top: 20px
    }
    
    #wrapper.omg_im_fixed {
        padding-top:145px!important;
    }
}

@media (max-width: 767px){
    #header.header_omg_im_scrolled {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 999;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .11);
    }

    #header.header_omg_im_scrolled nav {
        margin:0px!important;
        padding:0px!important;
        border:none!important;
    }
    
    #wrapper.omg_im_fixed {
        padding-top:168px!important;
    }
}

 

the replacement of header-nav (display: none) with transform and transition, will give your header a smoother animation on scrolling down, however to animate scrolling back to the top, I used a custom.css with the following code:

Quote

#header {transition: transform .5s;}

This last animation, isn't perfect yet (shows a bit of a white background for a few miliseconds, under the header), but the whole solution seems a well done work around for the flick that was annoying me. :)

I hope this will help someone else,

P.S.: For questions, I might not be able to answer xD because I no nothing about these stuff, (got here, searching online and testing through Devtools) but I'll try to share what I know.

 

Edited by vilarinho
The link url to my presta had errors. Fixed. Correct link: https://mypresta.eu/modules/front-office-features/fixed-sticky-header.html (see edit history)
  • Thanks 1

Share this post

Link to post
Share on other sites
  • 3 weeks later...
Zythom Enthusiast

Zythom

Posted
Posted

Hi everyone ! First of all thank you Vekia for this module !! Very usefull

i tried to follow the post of @vilarinho but i have a problem : he is talking about his 1.4.1 version, and i just have the 1.4.0 (downloaded from the first topic on top). So i don't have 3 "@media" in fixedheader.css, but only just 1...

May someone help me ?

If not, nevermind i'll work with this little jump 🤷‍♂️

 

Thanks !

  • Like 1

Share this post

Link to post
Share on other sites
vilarinho Newbie

vilarinho

Posted
Posted (edited)
8 hours ago, Zythom said:

Hi everyone ! First of all thank you Vekia for this module !! Very usefull

i tried to follow the post of @vilarinho but i have a problem : he is talking about his 1.4.1 version, and i just have the 1.4.0 (downloaded from the first topic on top). So i don't have 3 "@media" in fixedheader.css, but only just 1...

May someone help me ?

If not, nevermind i'll work with this little jump 🤷‍♂️

 

Thanks !

Hi @Zythom

 

I've updated my reply with the link to MyPresta - Prestashop Fixed sticky header product page. If you want to download this version, you can click the link to MyPresta on this reply as well. 

Edited by vilarinho
The link url had errors. Fixed. Correct link: https://mypresta.eu/modules/front-office-features/fixed-sticky-header.html (see edit history)

Share this post

Link to post
Share on other sites
Zythom Enthusiast

Zythom

Posted
Posted

Thanks a lot @vilarinho !! I downloaded it from my-presta.eu (your link goes to a 404 page).

I made the changes as in you last reply and it works well !!

great job, and thanks again

  • Thanks 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More

  I accept