Jump to content
dorje

Make top banner fixed in top of pages

Recommended Posts

i want to create a fixed top banner for promos and coupons just like

this http://addons.prestashop.com/demo/FO5145.html

 

in other words the top banner bar which stays on top of pages even if u are scrolling them down.

Any useful information would be appreciated.

 

ps version 1.6.1.4

Share this post


Link to post
Share on other sites

html box free in header position use code:


<div class='stickyTop'>
your contents here
</div>


<style>
.stickyTop{
position:fixed;
display:block;
width:100%;
text-align:center;
padding:20px;
background:#000;
color:#FFF;
}
</style>

Share this post


Link to post
Share on other sites

hi vekia thanks for the help

but i want to tweak the top banner module in theme configurator.  any suggestions ?

Share this post


Link to post
Share on other sites

thne you have to use these styles for class / id of banner block

 

just replace .stickyTop with class/id of banner

Share this post


Link to post
Share on other sites

i did it but its overlapping and showing under the  top horizontal menu, logo, search

 

#header .banner a {
  display: block;
  max-width: 1170px;
  max-height: 65px; 
  position: fixed;
  }
 
#header .banner a img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 65px;
  max-width: 1170px; }
 
/*# sourceMappingURL=blockbanner.css.map */
 

bar and cart , so its not looking nice when scrolled.

Share this post


Link to post
Share on other sites

Hello, did you managed to solve this, I am having the same issue. 

 

My theme is  suppose to be 1270 px widht but the banner is made for the basic theme whish is 1170 px. Because of this I have a black background color behind my image which is annoying.

 

Do you know how to solve this? I have already changed the blockbanner.css but nothing. I managed to change the dimension on the devtool but I do not know where to apply this changes. 

Help please. Here is my website where you can see the top banner I am talking about.  

www.mueblesmaderaviva.com

Thanks,

Share this post


Link to post
Share on other sites

<style><!--
.stickyTop{
position:fixed;
z-index: 999999999; 
max-height: 100%; 
display:block;
width:100%;
text-align:center;
padding:20px;
background:#000;
color:#FFF;
}
--></style>

now it's work ;)

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