Hi There,
I am just reviewing the temp layout to my site on my iphone, and have noticed that the drop down menu content I have set in the Pro Header is not visible. While the hamburger button is visible, the content seems to be hidden behind the header.
Just wondering what I’m missing, and what would be the solution to bring it up front - ideally the same way that the integrity mobile menus content (pushing down) works.
Thanks!
Chris
Hey Chris,
Thanks for writing in! I went ahead and changed the z-index of your Bar 2 from 9999 to 1
It seems to working fine now. Please clear your mobile browser’s cache and check the site again.
Cheers!
Hi There,
Thanks so much for the quick response!
It is now visible. Could you explain what the Z-Index is and why that affected the visibility?
Also, are there options for how the menu displays? Ideally I would like it to push content down the way the Integrity mobile menu functions.
Thanks again,
Chris
Hi again,
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Your Bar 2 had the higher stack order than your mobile menu that’s why your Bar 2 was in front of your mobile menu. To learn more about z-index property please see https://css-tricks.com/almanac/properties/z/z-index/ or https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
You can use Navigation Collapsed or Navigation Layered element to display the menu differently.
You can explore more options in the Header elements (see above screenshot). If you need the mobile menu similar to Integrity menu then you can switch back to Original Headers via Pro > Theme Options > Headers
Hope this helps!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.