Z-index issues

Author Posts

Martin_1 May 10, 2019 at 5:14 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

Hi,

I am stuck with some z-index issues I can’t seem to solve myself. I have a search icon on my main menu and need to move it to my top menu. I set it like this

position: relative !important;
top: -130px !important;
z-index: 10 !important;

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 :-).

Sebastian May 11, 2019 at 9:48 am

Hey Martin,

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.

This article on z-index is worth a read: https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/

Cheers,
Sebastian

Martin_1 May 14, 2019 at 11:57 am

Hi Sebastian,

I still can’t get it to work properly. Is it okay if I sent you the link via mail?

Regards,

Martin

Sebastian May 14, 2019 at 12:43 pm

Yeah sure, you can send the link via our contact form: https://themeover.com/support/contact/

Thanks,
Sebastian

Martin_1 May 14, 2019 at 1:21 pm

You’ve got mail :-).

Thanks Sebastian!

You must login or register to reply to this topic.