带有导航栏固定下拉菜单的引导程序被隐藏

Question

我在引导程序中遇到这个问题。 我制作了一个固定在顶部的导航栏，并且下拉菜单可以在计算机上使用。但是当我使用移动视图时，下拉列表不会显示。 我已经在这个网站和其他网站上搜索过解决方案，但没有一个对我有用。问题似乎是在移动视图中

overflow:auto;

。

这是我的代码：http://www.bootply.com/tMdIqM9xSL

HTML：

    <div class="row mynav">
        <div class="col-md-12 nopadding">
            <span class="logo glyphicon glyphicon-home" aria-hidden="true"><label>Hjem</label></span>
            <div class="btn-group"><span class="logo glyphicon glyphicon-user" data-toggle="dropdown" aria-hidden="true"><label>Din profil</label><span class="caret"></span></span>
                <ul class="dropdown-menu " role="menu">
                    <li><a href="#" data-toggle="modal" data-target="#myModal">Login</a>
                    </li>
                    <li><a href="#">My profile</a>
                    </li>
                    <li><a href="#">Add</a>
                    </li>
                    <li><a href="#">Favorites</a>
                    </li>
                    <li><a href="action.php?q=loggut">Logout</a>
                    </li>
                </ul>
            </div>
            <span class="logo glyphicon glyphicon-stats align-bottom" aria-hidden="true"><label>Stats</label></span>
            <span class="logo glyphicon glyphicon-envelope" aria-hidden="true"><label>Contact us</label></span>
            <span class="logo glyphicon glyphicon-search pull-right" data-toggle="collapse" href="#m_showsearch" aria-hidden="true"><label>Search</label></span>
        </div>
        
        <div id="m_showsearch" class="panel-collapse collapse container-fluid">

            <div class="col-md-4 floatnone">
                <div class="panel panel-default search-panel">
                    <div class="panel-heading">
                        <h4 class="panel-title"><a data-toggle="collapse" href="#collapseFag">Subject</a></h4>
                    </div>
                    <div id="collapseFag" class="panel-collapse collapse in">
                        <div class="panel-body">
                          <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
            
                    </div>
                </div>
                
            </div>
            <div class="col-md-1 text-center floatnone">

                <button type="button" class="searchbutton btn btn-primary btn-lg pull-center" onclick="findhelp();"><span class="glyphicon glyphicon-search" data-toggle="dropdown" aria-hidden="true"></span>
                </button>
                <br>
            </div>

CSS：

.maincontainer {
    padding: 0px;
}
.mynav {
    border-bottom: 1px solid rgb(38, 70, 83);
    background-color: #FFF;
    text-align: left;
    box-shadow: 0px 2px 2px #AAAAAA;
    z-index: 10;
    position: fixed;
    width: 100%;
}
#spaceontop {
    margin-bottom: 60px;
}
#m_showsearch {} a[title2]:hover:after {
    font-size: 10px;
    font-weight: thin;
    border: 1px solid #000;
    background-color: rgb(38, 70, 83);
    content: attr(title2);
    padding: 10px;
    size: 5px;
    color: #FFF;
    position: absolute;
    left: 50%;
    top: 50px;
}
.dropdown-menu {
    border-radius: 0px;
    border: 1px solid rgb(38, 70, 83);
}
.dropdown-menu li a:hover {
    background-color: #51b098;
    color: #fff;
}

.panel {
    box-shadow: 3px 3px 3px 0px;
    border: 1px solid #51b098;
    border-radius: 0px;
}
.search-panel {
    border-radius: 3px;
    box-shadow: 0px 0px 0px 0px;
}
.search-panel.panel-heading {
    box-shadow: 0px 0px 0px 0px;
}
.panel>.panel-heading {
    background-color: #FFF;
    /*#51b098;*/
    
    //box-shadow: 0px 2px 2px 0px;
    border-radius: 0px;
    font-size: 100%;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
}
.panel>.panel-headinga a {
    font-size: 20px;
    font-weight: bold;
    color: #51b098;
}
.panel-body {
    // border:1px solid #51b098;
}
.btn-group {
    vertical-align: initial;
}
.logo {
    font-size: 20px;
    height: 60px;
    padding: 18px;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: middle;
    border-top: 3px solid transparent;
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    -ms-transition: background 0.2s, color 0.2s;
    -o-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
    text-align: center;
}
.logo:hover {
    //background-color:rgb(38, 70, 83);
    color: orange;
    //text-shadow:-1px -1px #000;
    border-top: 3px solid rgb(38, 70, 83);
    -webkit-transition: background 0.5s, color 0.2s;
    -moz-transition: background 0.5s, color 0.2s;
    -ms-transition: background 0.5s, color 0.2s;
    -o-transition: background 0.5s, color 0.2s;
    transition: background 0.5s, color 0.2s;
}
.logo label {
    font-size: 12px;
    padding: 14px 0px 14px 0px;
    margin: 5px;
    font-family: Lato;
    text-transform: uppercase;
    padding: 0px;
}
.btn,
.btn:hover,
.btn:focus {
    //background-color:rgb(38, 70, 83);
    padding: 20px;
    //color:#FFF;
    padding: 10px;
    border-radius: 0px;
    border: 0px;
}
.panel-default>.panel-heading {
    background: transparent;
}
@media(max-width:1000px) {
    .logo label:last-child {
        display: none;
        //visibility:hidden;
    }
    .logo {
        height: 100%;
    }
}
@media(max-width:768px) {
    .logo label {
        display: none;
        padding: 20px 15px 15px 0px;
    }
    .logo {
        font-size: 16px;
        padding-left: 10px;
        padding-right: 10px;
        padding: 10px;
    }
    .div_headline {
        padding: 5px;
        text-align: center;
        width: 100%;
    }
    .div_headline:after {
        display: none;
    }
    .floatnone {
        padding: 0px;
    }
    #m_showsearch {
        padding: 1px;
    }
    .mynav {
        width: 100%;
        margin-bottom: 0px;
        max-height: 100%;
        overflow: auto;
    }

    .dropdown-menu {
    }
}

正如我所说，我已经尝试了找到的所有解决方案，但没有一个有效。

编辑： 我需要溢出才能使搜索按钮正常工作。当我按下搜索按钮时，会出现一个 div。而且搜索 div 可能很大，所以我需要能够滚动它。

Answer 1

只需删除

overflow: auto

。应该可以。

.mynav {
    width: 100%;
    margin-bottom: 0px;
}