'z-index causes issues with buttons nearby...but I need it

I've got a div container of a menu, simple example:

          <div class="nav-container">
            <div id="corp-crumb">
                <ul class="vertlist" id="ulTop">
                    <li class="crumblink submenu"><a id="createNewLink" href="#" title="Create New" class="crumblink">Create New</a>
                         <ul>
                            <li><a href="/Views/Company/Create.aspx" title="Company">Company</a></li>
                            <li><a href="/Views/Contact/Create.aspx" title="Contact">Contact</a></li>
                             <li><a href="/Views/Corporate/Create.aspx" title="Corporate Group">Corp. Group</a></li>
                             <li><a href="/Views/Issue/Create.aspx" title="Issue">Issue</a></li>
                            <li><a href="/Views/Program/Create.aspx" title="Program">Program</a></li>
                            <li><a href="/Views/Project/Create.aspx" title="Project">Project</a></li>
                            <li><a href="/Views/SubProject/Create.aspx" title="Sub Project">Sub Project</a></li>
                        </ul>
                    </li>
                 </ul>
             </div>
          </div>

This menu is at the top of all my pages, when the user scrolls the page I ensure that the menu is still visible via jquery, something to the effect of:

            var nav = $('.nav-container');
            var cc = $("#corp-crumb");

            $(window).scroll(function () {
                marginTop = ($(document).scrollTop() - scroll) + marginTop;
                scroll = $(document).scrollTop();
                if ($(this).scrollTop() > 50) {
                    nav.addClass("f-nav");
                    cc.addClass("addShadow");
                } else {
                    nav.removeClass("f-nav");
                    cc.removeClass("addShadow");
                }
            });

This basically says if the user scrolls add the class "f-nav" to the div nav, which is the nav-container shown above. The class f-nav has the following definition:

.f-nav {
     z-index: 9999; 
     position: fixed; 
     left: 10px; 
     top: 0; 
     width: 100%;
} /* this make our menu fixed top */

If the user scrolls back to the top we remove this class, as shown in the jquery else condition. This works fine...however the minute someone moves close to say some buttons on my page the z-index is causing the user not to be able to click the buttons, say for instance in this screen shot:

enter image description here

In chrome developer tools If I uncheck the z-index I can now click a button however my menu is sent behind the page as shown:

enter image description here

Is there some magical CSS available so that this doesnt happen? Im not sure why it is causing this issue...

jqueryhtmlcss


Solution 1:[1]

The div "under" your navigation container div needs a padding on the top to prevent elements to get under your nav div. 

<div class="nav-container">

     <!--Lots of other elements-->

</div><!--closing the nav-container div-->

<div id='div-under-nav'>
     <!--Your div with the buttons that gets into trouble-->
</div>

The above snippet is my assumption of your situation. lets say your nav container is 30px in height, then the first 30px of your div-under-nav is underneath it.

to fix that set this in your CSS

#div-under-nav{padding-top: 30px;}

Sorry for all the pseudo code but you did not gave me much to work with.

Solution 2:[2]

Based on the pictures, it may be caused by clicking on part of the semi-transparent shadow layer (corp-crumb) instead of the underlying button.

You can test if that is the case by replacing the menu shadow with a solid color as done by others. Or by removing corp-crumb and the js bits that reference it altogether. That way it will be easy to see when one is clicking on the menu shadow layer or the button below it.

Solution 3:[3]

you could avoid .f-nav to catch click events using : pointer-events:none;, it should not affect inside links. 

.f-nav {
     z-index: 9999; 
     position: fixed; 
     left: 10px; 
     top: 0; 
     width: 100%; 
     pointer-events:none; /* avoid this wrapper to catch click events */
} /* this make our menu fixed top */

Solution 4:[4]

This is the shadow layer below the menu having the same z-index value causing the buttons stay below it and unreachable, I believe.

Solution 5:[5]

hope this will helpful to someone with js ??

onClick={(e) => e.stopPropagation()}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 developers-have-no-vacation
Solution 2 fzzylogic
Solution 3 G-Cyrillus
Solution 4 effone
Solution 5 hexhad

Related Questions