Collapsed Bootstrap 3 Navbar goes out of bounds (dropdowns) - html

Question

I have a normal Bootstrap 3 fixed navbar in the top of my website which is really nice. The problem I'm facing and discovered the other day was that when the navbar collapses for being accessible in smaller devices, the dropdown items are going off the area designated for the navbar. The picture below explains it best:
So, the Dugi part is a dropdown menu item. When clicked, the items under it (marked in red) are going beyond the red part of the menu. Isn't the navbar supposed to go down with them and cover up the space?
Anyway, I've obviously touched the navbar's styling and I guess that's where it's going wrong. Here's what I've touched:
.navbar-default {
background-color: #dry-red;
background-image: -moz-linear-gradient(top, #dry-red, #mid-red);
background-image: -ms-linear-gradient(top, #dry-red, #mid-red);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dry-red), to(#mid-red));
background-image: -webkit-linear-gradient(top, #dry-red, #mid-red);
background-image: -o-linear-gradient(top, #dry-red, #mid-red);
background-image: linear-gradient(top, #dry-red, #mid-red);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dry-red', endColorstr='#mid-red', GradientType=0);
border-color: #dark-red;
overflow: visible;
max-height: 51px;
#media (max-width: 768px){
max-height: none;
height: auto;
}
#media (max-width: 470px){
width: 100%;
position: fixed;
top: 0;
left: 0;
}
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
max-height: 51px;
#media (max-width: 768px){
max-height: none;
}
}
.navbar-default .navbar-brand {
color: #lighten;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #lighten-hover;
}
.navbar-default .navbar-nav > li > a {
color: #lighten;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #lighten-hover;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #lighten;
background-color: #dark-red;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #lighten-hover;
background-color: #dark-red;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #dark-red;
border-bottom-color: #dark-red;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #dark-red;
border-bottom-color: #dark-red;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #dark-red;
border-bottom-color: #dark-red;
}
.navbar-default .navbar-toggle {
border-color: #dark-red;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #dark-red;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #lighten;
}
.nav > .dropdown, .dropdown-menu > li {
position: relative;
overflow: visible;
}
.navbar-collapse.in {
overflow-y: visible;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #lighten;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #lighten-hover;
}
}
.dropdown-menu:before {
position: absolute;
top: -7px;
right: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
right: 9px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.nav-center {
position: absolute;
width: 91px;
height: 50px;
left: 50%;
margin-left: -45px;
z-index: 100;
}
.navbar-inner {
position: relative;
}
And this is the HTML:
<nav class="website-nav navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-inner">
<div class="nav-center">
<!-- <img src="{{ S_WEB_PATH }}images/brand.png" /> -->
<div class="nav-brand"></div>
</div>
</div>
<div class="alt-nav navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toogle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- Navigation header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li {{ INDEX_ACTIVE }}><span class="glyphicon glyphicon-cloud-upload"></span> Home</li>
<li {{ REMOTE_ACTIVE }}><span class="glyphicon glyphicon-globe"></span> Remote</li>
<li {{ ZIP_ACTIVE }} class="visible-lg"><span class="glyphicon glyphicon-folder-close"></span> ZIP</li>
<li {{ POPULAR_ACTIVE }}><span class="glyphicon glyphicon-star"></span> Popular</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if not S_LOGGED_IN %}
<li><span class="glyphicon glyphicon-registration-mark"></span> Register</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
{% else %}
<li><span class="glyphicon glyphicon-envelope"></span> <span class="badge user-messages">0</span></li>
<li><span class="glyphicon glyphicon-bell"></span> <span class="badge user-notification">0</span></li>
<li class="dropdown">
<span class="glyphicon glyphicon-camera"></span> My Images
<ul class="dropdown-menu">
<li>All images</li>
<li class="divider"></li>
<li>Album 1</li>
<li>Album 2</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{% if S_SERVICE_USED == 'facebook' %}
<img src="https://graph.facebook.com/{{ S_USERNAME }}/picture" height="24px" class="img-circle avatar" alt="Avatar">
{% else %}
{% if S_USER_AVATAR != '' %}<img src="{{ S_AVATAR_PATH }}" id="my_avatar" height="24px" class="img-circle avatar" alt="Avatar">{% else %}<span class="glyphicon glyphicon-user"></span>{% endif %}
{% endif %}
<span class="{% if S_SERVICE_USED == 'facebook' or S_USER_AVATAR != '' %}valign-middle{% endif %}">{{ S_USERNAME }}</span>
</a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-user"></span> Me</li>
<li><span class="glyphicon glyphicon-cog"></span> Settings</li>
{% if S_SERVICE_USED != 'facebook' and S_SERVICE_USED != 'twitter' %}<li><span class="glyphicon glyphicon-edit"></span> Edit Profile</li>{% endif %}
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</li>
{% endif %}
</ul>
</div>
</nav><!-- Navigation -->
Anything other than this, there is nothing I've touched. I've tried fixing this in the .navbar-default by adding this in it:
#media (max-width: 768px){
max-height: none;
height: auto;
}
This didn't do anything.
Any help would be highly appreciated as it's really irritating to see this happening and having no clue where it's coming from. Could this be Bootstrap's problem? I doubt it.

Answer 1

It's not the .navbar-default max-height that causes the scroll. It's the .navbar-collapse.
Without adding any of your styles and just using Bootstrap's default, I can see that scrollbar and it's caused by this:
.navbar-collapse {
max-height: 340px; /* *** THIS IS YOUR ISSUE *** */
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse.in {
overflow-y: auto;
}
A demo of the scrollbar showing.
So you can fix that by overriding that in your styles:
.navbar-collapse {
max-height: none;
}
A demo with scrollbar gone.
Finally, with regard to your avatar being too big on the larger screens, if you really want to use your media query you'd do it like this:
.navbar-default {
max-height: 51px;
}
.navbar-collapse {
max-height: none;
}
#media (max-width: 768px){
.navbar-default {
max-height: none;
}
}
A demo of media query working.
Although to be honest with the last example I'm not sure why you don't just set a max-height on the avatar like this.

Answer 2

Rather than setting max-height: auto, just take out the max-height: 51px; styles and leave it at height: auto. The container should expand to fit your content.