无法在移动下拉导航中滚动

Question

我在移动菜单上遇到了一些麻烦, - 我无法滚动.要通过滚动来清除我的内容,我会看到整个菜单.现在滚动时,它会在一定量的px(标题的高度)后停止.请尽量减少窗口,如果您想自己看一下,它看起来像移动风景.

如图所示,您无法看到整个菜单.

问题如下:

header {
        position: fixed;
}

它需要修复,但我必须能够滚动.有什么建议？

我试图删除部分代码以使其更容易理解.

HTML

<header class="nav-down">
    <nav class="navbar navbar navbar-fixed-top site-navigation" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Aarseth-Navbar">
                <section class="si-icons si-icons-default">
                    <span class="si-icon si-icon-hamburger-cross" data-icon-name="hamburgerCross"></span>
                </section>
            </button>
            <div id="navbar-brand-cont">
                <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
                    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.jpg">
                </a>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="Aarseth-Navbar">
            <ul class="nav navbar-nav">
                <?php wp_nav_menu( array( 'menu' => 'Hovedmeny', 'menu_class' => 'nav-menu' )); ?>
            </ul>
        </div>
    </nav>
</header>

CSS

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.nav-up {
    top: -120px;
}

.navbar-fixed-top { 
    position: absolute;
}

.nav-menu { 
    margin-top: 90px;
    padding-bottom: 25px;
}


@media screen and (max-width: 767px) {
    header {
        height: 100px;  
    }

    .site-navigation ul {
        display: block; 
    }
    #Aarseth-Navbar ul li {
        clear: both;
        margin-left: 0;
        float: none;
        display:block;
        margin-top: 15px;
        padding-bottom: 15px;
    }

    .navbar-collapse {
        height: auto;
        max-height:none;
        margin-top: 20px;
        padding-left: 0;
        padding-right: 0;
    }

    #Aarseth-Navbar {
        overflow: hidden;
    }

    .navbar-nav {
        width: 100%;    
    }

    .menu-hovedmeny-container {
        padding-top: 0px;   
    }

    .nav-menu {
        padding-left: 0px;  
        padding-bottom: 0px;
    }

    .site-navigation ul {
        width: 100%;    
    }

    .menu-hovedmeny-container {
        padding-right: 0px; 
    }

    .navbar-brand {
        padding-bottom: 0px;    
    }
    .sub-menu {
        display: block; 
        width: 100%;
        position: relative;
    }

    .navbar-collapse {
        max-height: none!important;
    }
}

如果你想看看:http: //goo.gl/GZaM5K

注意:我正在修改菜单图标,所以如果你没有看到它,请按右边的汉堡包/菜单图标.href工作,它只是我遇到麻烦的svg.

请问是否有不明确的事情.

Answer 1

如果您希望移动,下拉导航可滚动,则必须height使用div您编码的包装器来定义包含移动导航的包装.你应该定义一个高度,你应该设置overflow-y为scroll,也可以添加touch滚动.

#MobileMenuDivWrapper { 
  height: 200px;
  max-height: 200px;
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling:touch; // mobile safari
}

Answer 2

我的问题是height单位（来自这个论坛）。

我不得不height将菜单中的div从更改height: 100%为height: 100vh