Make top banner fixed in top of pages

[dorje]

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

[vekia]

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>

[dorje]

hi vekia thanks for the help

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

[vekia]

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

 

just replace .stickyTop with class/id of banner

[dorje]

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.

[motion2082]

Had the same issue on my theme

[desger99]

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,

[jeromecollection]

<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

[jeromecollection]

i would like to close this top banner block with a click ... how to do please ?