Bootstrap with navbard fixed dropdown is hidden - css

Question

I have this problem in bootstrap.
I have made a navbar wich is fixed on top, and the dropdown does work on computer. But when I use mobile view the dropdown does not show.
I have search this and other sites for solution, but none of them have worked for me. The problem seems to be overflow:auto; in mobile view.
Here is my code: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>Login
</li>
<li>My profile
</li>
<li>Add
</li>
<li>Favorites
</li>
<li>Logout
</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> </p><p> </p><p> </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 {
}
}
As I said I have tried every solution I have found, but none those I found worked.
EDIT:
I need the overflow to make the search-button work. When I press the searchbutton a div appears. And the search-div may be large so I need to be able to scroll it.

Answer 1

Just remove overflow: auto. It should work.
.mynav {
width: 100%;
margin-bottom: 0px;
}