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