However no matter what z-index I set, it keeps being hidden behind the topmenu as soon as I view the site live. I can only see it when I mouse over the main menu itself weirdly enough.
So I thought I target the top menu as well and gave that a z-index of 1. But not luck.
I’m having the same issue with a title. It keeps falling behind something else. Those z-indexes are killing me :-).
Z-index can be a real pain sometimes. If you can send me a link to your site I can advise you more specifically. But for now, I can suggest looking at the position/z-index values of the icon’s parent – the main menu. If you give the main menu a non-static position (e.g. position:relative) and make sure it has a higher z-index than the top menu, you may find that the icon displays on top.