Jump to content

Recommended Posts

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

post-368162-0-08030500-1426541290_thumb.png

Edited by JavierP (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

good , sorry.

Ya and corrected the url of demo.

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

Regards

JavierP

Share this post


Link to post
Share on other sites

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:
  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

if you want cart there you have to rebuild your theme

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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 ?

Share this post


Link to post
Share on other sites

 

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 ?

Share this post


Link to post
Share on other sites

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

 

Thanks

:)

Share this post


Link to post
Share on other sites

global.css and global.js

both located in theme directory

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

how can I put it in the foreground?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 by lunohod.com.ua (see edit history)

Share this post


Link to post
Share on other sites

 

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?

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

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