0

I have a woocommerce shop setup using the retailer theme. I am trying to create a fixed header and make it so only the product area scrolls. I have everything fixed so far except for the header. I have attached a .gif for an example of the scroll.

GIF Scroll: http://i59.tinypic.com/dxnuyr.jpg [Enlarge in Tinpic to see animation]

Website: http://museiam.ca/product-category/men/

Any input is appreciated. Thanks!

crazythedon
  • 15
  • 1
  • 8

3 Answers3

2

CSS for the header should be

.header-class-name{
    position: fixed;
    top:0;
}
tylerlindell
  • 1,545
  • 2
  • 17
  • 20
  • Hello. I was able to fix the header and align everything properly, however my top bar links are now inactive. Any ideas? Thanks! – crazythedon Nov 19 '14 at 02:58
  • That should be a new question if it has not been asked already :-) – tylerlindell Nov 19 '14 at 06:48
  • It could have been overwritten, accidentally deleted, or the class changed and now, it does not match the js/css rules you have defined. just a few possibilities – tylerlindell Nov 19 '14 at 07:06
2

Use this css lines 

.container_12{margin-top: 188px;}
.menu_centered_style, .gbtr_tools_wrapper{
  position: fixed;
  width: 100%;
  z-index: 999;
}
.menu_centered_style{
  top: 62px;
}
.gbtr_tools_wrapper{
  top: 0;
}
Mo'men Mohamed
  • 1,851
  • 20
  • 24
  • Hey. I adjusted the container_12 margin-top to 30px; and the menu to 30px as well and it aligned well. However, in the top bar the search, my accounts, and log off buttons are inactive. Note the 'Shopping Bag' doesn't belong there rather I just moved it. Please check the link to see. Thanks. – crazythedon Nov 19 '14 at 02:56
0

You can use bootstrap 3 for making header responsive as well static and can be keep at top while scrolling the page.

bootstrap will take care of responsive design as well.

Hire Developers
  • 1
  • 1