Question

我在移动菜单方面遇到了一些麻烦， - 我无法滚动。要通过滚动来清除我的内容，我会看到整个菜单。现在滚动时，它会在一定量的px（标题的高度）后停止。请尽量减少窗口，以便在您想要自己看一下时看起来像移动风景。

enter image description here 如图所示，您无法看到整个菜单。

问题如下：

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个单位（来自this forum）。

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

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

2 个答案: