html - 启用 offcanvas 菜单时链接不起作用

Question

这是我的网站:http://vani.valse.com.my/schone_lightings/index.php .

当我使用移动版的 offcanvas 菜单时，页面上的任何链接都无法点击。我认为这与 z-index 有关，但它并没有改变任何东西。谁能告诉我为什么会发生这种情况以及如何解决它？

我的CSS

.off-canvas-fixed {
    -webkit-transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;
    height:100%;



}
.move-right > .off-canvas-fixed {
    -webkit-transform: translate3d(15.625rem, 0, 0);
    transform: translate3d(15.625rem, 0, 0);
    height:100%;

}
.left-off-canvas-menu {
    -webkit-transform: none;
    transform: none;
    margin-left: -15.625rem;
    height: 100%;

}
.main-section {
    padding:45px 0 0;

}
.tab-bar {
    width:100%;

}
@media only screen and (orientation:landscape) and (max-width: 64em){
    .main-section {
        padding:0 0 0 2.8125rem;
    }
    .off-canvas-fixed {
        width:2.8125rem;
        height:100%;
        background:#333333;
    }
     section.left-small{
        border:none;
        box-shadow:none;
    }
}
/*remove opacity for mobile*/
@media all and (max-width : 40em) 
{
     .row { opacity : 1; } 
     .cart,.search,.myModal,.reveal-modal {margin-top:50px;}
}

我的 HTML

<!-- Off Canvas Nav ----------------------------------------------------------------------------------------------------->
<div class="off-canvas-wrap">
    <div class="fixed off-canvas-fixed hide-for-large-up"> <a class="exit-off-canvas"></a>

        <nav class="tab-bar">
            <section class="left-small"> <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>

            </section>
            <section class="show-for-portrait right tab-bar-section">
                 <h1 class="title">Logo</h1>

            </section>
        </nav>
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li class="show-for-small">

                    </li>
                    <li><a href="index.php">home</a></li>
                    <li><a href="productlisting.php" class="selected">product</a></li>
                    <li><a href="">help</a></li>

                    <li><a href="">contact</a></li>
                    <li><a href="">login/sign up</a></li>
            </ul>
        </aside>
    </div>
    <div class="inner-wrap"> <a class="exit-off-canvas"></a>

        </div>
    </div>

编辑:

我删除了移动设备的不透明度控制，然后链接正常工作，除了最顶部的搜索链接。但是，我需要删除不透明度并使所有链接正常工作。

/*remove opacity for mobile*/
@media all and (max-width : 40em) 
{
    /* .row { opacity : 1; } */
     .cart,.search,.myModal,.reveal-modal {margin-top:50px;}
}

Answer 1

.off-canvas-fixed 类有高度:100%；它覆盖了您的网页。