Fixed Header

[JavierP]

Good on design issues I'm green, so I am writing to see if I echais us a hand;)

Well the question is this, is I want to make this template http://pavodemo.com/prestabrain/nextstore/hitech/index.php

a float fixed header or header is not exactly as stated. But it also includes the cart in it, down the page down.

 

To always stay as the menu at the top of the page. Type what makes now also the page of this forum prestashop, lowering the header stays up top ...

 

Thanks in advance. I hope for your wonderful help.

 

Regards

Edited March 17, 2015 by JavierP (see edit history)

[moy2010]

Please post again the URL, it's corrupted.

 

For fixing the header on top, you have to add a css rule "position:fixed" to the div header. 

Once you give us your shop url we can help you further.

[JavierP]

good , sorry.

Ya and corrected the url of demo.

Thank you for your quick response . I hope your help.

Regards

JavierP

[vekia]

use this js snippet:
 

$(window).scroll(function(){
      if ($(this).scrollTop() > 135) {
          $('#pts-mainnav').addClass('fixed');
      } else {
          $('#pts-mainnav').removeClass('fixed');
      }
  });

and in css styles define class "fixed"

 

.fixed {

position:fixed!important;

z-index:9999;

width:100%;

margin:0px;

top:0px;

}

it will work in that way then:

[JavierP]

many thanks for the help and the video. But would need the cart and the logo will also be included if ...

Thanks vekia y moy2010 for the help

regards

JavierP

[vekia]

if you want cart there you have to rebuild your theme

there is no other way to achieve it without theme modification.

[JavierP]

Many thanks for the help . Then Vekia there would be another way of putting the cart or logo in the fixed header¿ ? Without having to change all the template ...

or similar to this website http://mobilprylar.se/

Regards

Edited March 17, 2015 by JavierP (see edit history)

[Totti]

 

use this js snippet:

 

$(window).scroll(function(){
      if ($(this).scrollTop() > 135) {
          $('#pts-mainnav').addClass('fixed');
      } else {
          $('#pts-mainnav').removeClass('fixed');
      }
  });

and in css styles define class "fixed"

 

.fixed {

position:fixed!important;

z-index:9999;

width:100%;

margin:0px;

top:0px;

}

 

it will work in that way then:

 

$(window).scroll(function(){

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

$('#pts-mainnav').addClass('fixed');

} else {

$('#pts-mainnav').removeClass('fixed');

}

});

 

where paste ?

[Totti]

 

use this js snippet:

 

$(window).scroll(function(){
      if ($(this).scrollTop() > 135) {
          $('#pts-mainnav').addClass('fixed');
      } else {
          $('#pts-mainnav').removeClass('fixed');
      }
  });

and in css styles define class "fixed"

 

.fixed {

position:fixed!important;

z-index:9999;

width:100%;

margin:0px;

top:0px;

}

 

it will work in that way then:

 

where they made these changes ?

[alexpsc]

Could someone share the name of the files to implement the js snippet and the CSS style?

 

Thanks

[vekia]

global.css and global.js

both located in theme directory

[alexpsc]

Thanks for the info Vekia.

It worked

 

Best regards,

[vekia]

may i know the url to see your website and check how it works?

[Damiano]

thanks at all... i've tried but the result does not seem to be the best

how can I put it in the foreground?

[fastwebdev]

Great tutorial, is working, but depends your  div header to mine is

that in global.js

 

$(window).scroll(function(){
      if ($(this).scrollTop() > 150) {
          $('#header').addClass('fixed');
      } else {
          $('#header').removeClass('fixed');
      }
  });

 

 

this chunk in global.css

 .fixed {
position:fixed!important;
z-index:9999;
width:100%;
margin:0px;
top:0px;
}

[lunohod.com.ua]

Hi. 

I used this snippet for "block_top_menu". Works great, but when, while scrolling, "block_top_menu" become "fixed" it changes width on 1263px (from 1170px). How to fix this issue?    

Edited May 12, 2016 by lunohod.com.ua (see edit history)

[vekia]

 

Hi. 

I used this snippet for "block_top_menu". Works great, but when, while scrolling, "block_top_menu" become "fixed" it changes width on 1263px (from 1170px). How to fix this issue?    

 

 

any chance to inspect it directly on your website, please?

[lunohod.com.ua]

Thanks for your reply. 

http://xn--80adffzugu.xn--j1amh/

I temporarily fixed that issue by changing "width" parameter from 100% to 1170px, but it of course affected mobile version (and other screen resolutions).

[lunohod.com.ua]

Resolved! 

I used in superfish-modified.css, restriction of width after definition of width : 

1. width: 100%;
   
2. max-width: 1170px;
   

[innocence]

On 3/17/2015 at 5:15 PM, vekia said:

use this js snippet:
 

$(window).scroll(function(){
      if ($(this).scrollTop() > 135) {
          $('#pts-mainnav').addClass('fixed');
      } else {
          $('#pts-mainnav').removeClass('fixed');
      }
  });

and in css styles define class "fixed"

 

.fixed {

position:fixed!important;

z-index:9999;

width:100%;

margin:0px;

top:0px;

}

it will work in that way then:

thank you for this solution

when you are using classic theme modify 

theme.js

and theme.css