Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Purecss Scrollable Horizontal Menu Z-index Issue

Post a Comment
I am trying to fix this but i cant. I have purecss menu, horizontal scrollable menu (see demo http://purecss.io/menus/), but the submenus/children of depth 1 and 2 doesnt popup on

Solution 1:

I think the problem is more to do with your overflow settings rather than z-index. If you add the following to your <head> section, see if it makes things any better:

<style>.pure-menu-scrollable {
    overflow-x: visible !important;
    overflow-y: visible !important;
}
</style>

However, if this works for you, you should try and rework the styles you have so that the !important rule can be removed. It looks like the class pure-menu-scrollable has its overflow settings applied in several places, and this should be cleaned up first.

Note that without a working demo, it's difficult to say if this is the full problem you're experiencing. The code snippet in your question seems to work with this change, but other elements might affect your own code.

Update Officially, it looks like PureCSS doesn't support dropdowns with scrollable menus. I found a workaround though, involving one line of Javascript and some minor adjustments to your menu. First, change the surrounding <div> to the following:

<div id="scrollmenu"class="pure-menu pure-menu-horizontal">

I gave it an ID, and removed the pure-menu-scrollable class. Next, add this line of Javascript:

<scripttype="text/javascript">document.getElementById('scrollmenu').addEventListener('touchstart', function(event){});
</script>

This seems to kick-start the touch events on the parent element (I got this tip from Nick H247's post on a similar issue).

Hope that helps!

Post a Comment for "Purecss Scrollable Horizontal Menu Z-index Issue"