z-index problem

Tagged: 

Author Posts

anzo October 4, 2021 at 8:01 pm

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

Hello, see: https://maingarmisch.de – > when I open the menu, it is hidden by the map. I got this recommendation:

Only the map is still above the menu now, because the header still uses z-index
111 and the map needs at least 1001 (I suggest 10000). If you don’t want to adjust z-index for the header, then you can’t put the map below the menu. There is no other way, because the map uses different z-indexes up to 1000. Actually, the header element (#page-header) should not have z-index. It should have z-index auto (without the specific z-index) and then .w-nav should have a z-index of 10000.

But I can’t find with Microthemer where to make this change. I also can’t find with Microthemer where z-index 111 is set. *please help* Where do I need to look to fix the problem on website and mobile?

Thanks a lot! Regards Anja

Sebastian October 5, 2021 at 1:39 pm

Hey Anya,

The z-index property is in the Behaviour group (last one) and the element you need to target has an id of #page-header. Watch this video to see how to find that element in Microthemer: http://somup.com/cr6hIB31Cr

I hope that helps. Please let me know if you’re still stuck.

Many thanks,
Sebastian

anzo October 5, 2021 at 7:20 pm

Thank you very much! Your created video was fantastic. It motivated me to implement what you showed in Firefox in Microthemer: with success, but … whew … in the mobile version after clicking on the citizen menu, the menu fields are suddenly upside down. Is that the same for you? “Blog” should be the topmost field. Do you have a tip for this as well – is this related to the z-index change?

Kind regards
Anja

Sebastian October 6, 2021 at 9:40 am

Hey Anja,

I’m glad you solved the z-index issue. Actually, the reversed order of the menu items is due to some experiments you did in Microthemer. You have some selectors called ‘Page header hover underline’, ‘Page header hover underline _2’ , and ‘Page header hover underline _3’. If you delete them, that will remove your column-reverse setting, which you set, on the Phone responsive tab.

Looking at your CSS, I can see a a bug where Microthemer should have disabled your flex-direction: column-reverse setting, but some variations of that rule, with vendor prefixes like -webkit-flex-direction were still active, and thus reversing your menu items. I will roll out a fix for that ASAP. But in the meantime, you can solve this by deleting the aforementioned selectors, which you can find in your General folder.

Cheers,
Sebastian

anzo October 9, 2021 at 9:09 am

Hello Sebastian,

you are a genius. Thank you very much! Thank you very much for the announced optimization. I am very happy with Microthemer.

Best regards
Anja

anzo October 9, 2021 at 9:13 am

PS. If you have another idea how I can hide the leafleat “buttons” (left) and map label (bottom) in the mobile menu with Microthemer (because it doesn’t match the mobile menu), I would be very curious.

Thanks a lot!

Sebastian October 14, 2021 at 10:16 am

Hey, I’m sorry I missed this before. I read it on the weekend on my phone and then forgot to mark it as unread, to get back to it on Monday.

This is a z-index issue again, you just need to bump up your custom z-index value in Microthemer from 1000 to 1001 (or 10000 as per the recommendation you got before). So the code would look like this:

#page-header {
	z-index: 10000 !important;
}

I hope that helps!

Cheers,
Sebastian

anzo October 17, 2021 at 12:47 pm

Cheers Sebastian,

after my changes, I got this feedback from Google. Are my changes as elaborated here not perfect after all?

User experience on mobile devices-problems detected on https://maingarmisch.de/

In Search Console, 3 issues of the type user-friendliness on mobile devices have been detected for your website:

Main issues: The following issues were found on your website:
– Content wider than screen
– Clickable elements are too close together
– Text is too small to read

Thanks again and again


Sebastian October 17, 2021 at 1:23 pm

Hey, that won’t have anything to do with your z-index change. Google is recommending that you make some general design changes so the site is easier to use on mobile – like increasing the space between links or buttons.

You must login or register to reply to this topic.