locked
Cannot click the any of the controls RRS feed

  • Question

  • User134074001 posted

    Hello Freinds,

    I am confused with this Menu I have bring a shadow on the page. Due to which I cannot click on the controls. Take a look at the pic. here's the link : https://ibb.co/jvHhTz

    Also the HTML Menu Code:-

    <nav style="margin-top:-45px">
    <ul>
    <li>
    <a href="http://localhost:1629/Index/Index" class="current">
    <span data-text="Home">Home</span>
    </a>
    </li>
    <li>
    <a href="#">
    <span data-text="About">Used Cars</span>
    </a>
    </li>
    <li>
    <a href="#">
    <span data-text="Grants">New Cars</span>
    </a>
    </li>
    <li>
    <a href="#">
    <span data-text="Donations">Specials</span>
    </a>
    </li>
    <li>
    <a href="#">
    <span data-text="Donations">Car Reviews</span>
    </a>
    </li>
    <li>
    <a href="http://localhost:1629/Contact/ContactUs">
    <span data-text="My Life">Contact Us</span>
    </a>
    </li>
    <li style="float:right">
    <a href="#">
    <span data-text="Contact">Login/Logout</span>
    </a>
    </li>
    </ul>
    </nav>
    Friday, August 3, 2018 7:35 PM

All replies

  • User-474980206 posted
    You have your z-index wrong for the menu. See

    https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

    To understand the context rules.
    Friday, August 3, 2018 11:56 PM
  • User134074001 posted

    Tried to put z-index , but no effect. Same thing called nav::before overlaps my controls.

    Set nav-before- z-index:3 and body z-index:4. But no effect

    Saturday, August 4, 2018 12:33 PM
  • User-474980206 posted

    as I said, you will need to read the CSS docs on context and z-index, to debug what is wrong. most likely the menu is in a lower context, so no elements can appear on top of a higher context. context is all controlled by CSS.

    Monday, August 6, 2018 1:25 AM
  • User-893317190 posted

    Hi aniruddha4,

     The property z-index could only be applied to element which is positioned ,that is to say your nav must have the property  position :relative(fixed or absolute).

     Furthermore , element which has higher z-index will be put over the element which has lower , so if you want to  put your nav over other element ,you should give it highter  z-index.

     I have made  a sample  to show how to put your nav over other element.

    <nav style="z-index:200;">
            <ul>
                <li>
                    <a href="http://localhost:1629/Index/Index" class="current">
                        <span data-text="Home">Home</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span data-text="About">Used Cars</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span data-text="Grants">New Cars</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span data-text="Donations">Specials</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span data-text="Donations">Car Reviews</span>
                    </a>
                </li>
                <li>
                    <a href="http://localhost:1629/Contact/ContactUs">
                        <span data-text="My Life">Contact Us</span>
                    </a>
                </li>
                <li style="">
                    <a href="#">
                        <span data-text="Contact">Login/Logout</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div style="height:200px;;z-index:100;width:200px;top:0">
          
        </div>
    
    

    The div has a z-index 100 while  the nav has the z-index 200 which is bigger than 100.Please don’t forget to add to your nav’s style property.

     For more information about  position, please refer

    https://developer.mozilla.org/en-US/docs/Web/CSS/position

    If it doesn’t work , please show all your html page , css stylesheet  and javascript code or if possible ,share your project in github.

    Best regards ,

    Ackerly Xu

    Tuesday, August 7, 2018 5:15 AM