fixing a hook on the top of the page

Dear Support-Team,

I created a hook/element above the header which I would like to be fixed.
It is a div followed by the header and then the navigation which is set to stick when the page is scrolled down.
Without the attribute fixed, the element/hook looks just as it should and disappears when the page is scrolled down and gives place to the sticky-navigation.

I would like to fix this header, so it remains on the page every time and when the page is scrolled, the header disappears, but the sticky-navigation "joins" under this sticky-header :)

However, as soon as I set position to fixed for this div, the whole div shrinks to a few pixels with no content visible. It seems that the header goes on top, although the z-index is set to 2000.

What do I miss here? Any idea?

Here is the code for the element:

Here is the css:
#contact-div {
width:100%;
height:40px;
background-color:#545454;
color:#ffffff;
text-align:center;
position: fixed;
top: 0;
z-index: 3000;
}

The element is before_header, PHP (not use but enabled), set for the entire site.

Thanks, Erika