Menu
The OpenCart default layout has a topbar with “account” and “shopping-cart” links. I made its position fixed so it would stay on top of the browser window when the user scrolls down the page.
`#topbar { height:32px; position:fixed; z-index:1; }
The layout also has a header which I gave a fixed position and a top margin of 32px (the height of the topbar) so it would stick on top too, right below the topbar.
`#header { height:75px; position:fixed; margin-top:32px; z-index:2; }
I gave each positioned object a z-index to stack the topbar on top of all other content, but a problem arises: the topbar has a dropdown menu which is now stacked behind the header. I tried different z-indexes but nothing seems to work here. The topbar dropdown menu stays behind the header.
What can I do about this?
**Edit:
I tried giving the dropdown menu different positions (relative, static, fixed) and z-indexes too and I also gave both elements a background color, border and text color but I don’t think this has anything to do with the problem so I did not put it in the code above.