Fixed / Floating Header

[kineas]

Hello, 

I set the header (and top-menu) to be fixed so it could stay on when scrolling down. 
However, now the menu is "on the top" of category-image, as well as the content-box I set up for the homepage. The effect is that the resizing is bugging --> For example, if you go to the homepage http://www.homegourmet.be and minimize the window, the "Home" of "Home Gourmet" is disappearing. 

 

How come that my fixed-topmenu is now on the top of my category images, and not above them? setting-up a padding-bottom doesn't work (and it leaves a blank padding, where I want my menu to be "scotched" to the image right below)

 

modified global.css code: 

header {
  z-index: 1;
  position: fixed; /*old = relative */
  background: #fff;
  padding-bottom: 0px; 
  width: 100%}

Any idea? Thanks !!! 

Edited April 26, 2016 by kineas (see edit history)

[kineas]

Really in despair here sorry to "up again" but if you have an idea... 

[Daresh]

Usually if you want something to be on top, you give it a higher z-index.

[kineas]

It doesn't change anything.. I set it up to 2, 10, 100... doesn't change. 

 

See an example here: the menu is shrinking (well, on top of..)  the whole title of the product, for example  http://homegourmet.be/index.php?id_product=27021701&controller=product&id_lang=1

[Daresh]

I see, well in this kind of situations, when I want to make something fixed, I set an additional padding to what is next after it. For example in your case a top padding of 61px to the columns-container should do.

[kineas]

You're my hero.