Create fixed header in wordpress

Question

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!

Answer 1

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

Answer 2

CSS for the header should be

.header-class-name{
    position: fixed;
    top:0;
}

Answer 3

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.