Scroll in navbar menu fixed - css

Question

I have this code (this is bootstrap fixed navbar menu):
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid container_mop">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#"><img src="images/logo.png" class="center img-responsive logo_top"></a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left navbar_odstep">
<li class="mopy_menu_1">O mnie</li>
<li class=" mopy_menu_1 dropdown ">
gabinet <span class="caret"></span>
<ul class="dropdown-menu dropdownPadding">
<li class=" mopy_menu_dropdown">- Gdzie przyjmuje </li>
<li class=" mopy_menu_dropdown">- Badania </li>
<li class=" mopy_menu_dropdown">- Zabiegi</li>
<li class=" mopy_menu_dropdown">- Przygotowanie </li>
</ul>
</li>
<li class="mopy_menu_1">Usługi</li>
<li class="mopy_menu_1">Cennik</li>
<li class="mopy_menu_1">Artykuły</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar_odstep">
<li class="mopy_menu_1">Kontakt</li>
</ul>
</div>
</div>
</nav>
.navbar_odstep {
padding-top: 50px;
padding-bottom: 40px;
}
/*menu top*/
.navbar-default .navbar-nav > li > a {
color: white;
}
.navbar-default .navbar-nav > li > a:hover {
color: white;
}
.navbar-default .navbar-nav > li > a:focus {
color: white;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
background-color: transparent !important;
color: white !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
background-color: #4B617F !important;
color: white !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
background-color: #4B617F !important;
color: white !important;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #3C4052;
}
.dropdown-menu {
background-color: #4B617F !important;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #3C4052;
}
.navbar-default {
background-color: #3C4052;
border-color: #3C4052;
}
.dropdownSelector {
padding-top: 0px !important;
position: relative;
top: -4px;
text-align: center;
}
.navbar_cor_1 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=1);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.mopy_menu_1 {
text-transform: uppercase;
font-size: 16px;
font-weight: normal;
}
.mopy_menu_dropdown {
text-transform: none;
font-size: 16px;
font-weight: lighter;
}
.dropdownPadding {
padding-top: 20px;
padding-bottom: 20px;
}
#media screen and (min-width: 1800px) {
.container_mop{
width: 1750px;
background-color: black;
}
.dropdown-menu:before {
position: absolute;
top: -17px;
left: 10%;
display: inline-block;
border-right: 27px solid transparent;
border-bottom: 17px solid #ccc;
border-left: 27px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -16px;
left: 10%;
display: inline-block;
border-right: 26px solid transparent;
border-bottom: 16px solid #4B617F;
border-left: 26px solid transparent;
content: '';
}
}
#media(min-width: 1700px) and (max-width: 1799px) {
.container_mop{
width: 1700px;
background-color: red;
}
}
#media(max-width: 480px) {
.odstepNadMenuFront {
background-color: red;
height: 120px;
}
.logo_top {
padding-top: 50px;
width: 90%;
}
.navbar_odstep {
padding-top: 50px;
padding-bottom: 0px;
}
.navbar_odstep{
padding:0 ;
}
}
When I have 480px width I have problem with scroll in menu (after click "gabinet" in menu - after open submenu). In desktop resolution I haven't any problems.
Screen with my problem:
https://imgur.com/a/bRJrIWh
Does anyone know how to fix it? The site uses Bootstrap 3

Answer 1

max-height is specified in bootstrap so you need to overwrite it by adding below css
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: 100% !important;
}
LIVE SNIPPET
.navbar_odstep {
padding-top: 50px;
padding-bottom: 40px;
}
/*menu top*/
.navbar-default .navbar-nav > li > a {
color: white;
}
.navbar-default .navbar-nav > li > a:hover {
color: white;
}
.navbar-default .navbar-nav > li > a:focus {
color: white;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
background-color: transparent !important;
color: white !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
background-color: #4B617F !important;
color: white !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
background-color: #4B617F !important;
color: white !important;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #3C4052;
}
.dropdown-menu {
background-color: #4B617F !important;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #3C4052;
}
.navbar-default {
background-color: #3C4052;
border-color: #3C4052;
}
.dropdownSelector {
padding-top: 0px !important;
position: relative;
top: -4px;
text-align: center;
}
.navbar_cor_1 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=1);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.mopy_menu_1 {
text-transform: uppercase;
font-size: 16px;
font-weight: normal;
}
.mopy_menu_dropdown {
text-transform: none;
font-size: 16px;
font-weight: lighter;
}
.dropdownPadding {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: 100% !important;
}
#media screen and (min-width: 1800px) {
.container_mop{
width: 1750px;
background-color: black;
}
.dropdown-menu:before {
position: absolute;
top: -17px;
left: 10%;
display: inline-block;
border-right: 27px solid transparent;
border-bottom: 17px solid #ccc;
border-left: 27px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -16px;
left: 10%;
display: inline-block;
border-right: 26px solid transparent;
border-bottom: 16px solid #4B617F;
border-left: 26px solid transparent;
content: '';
}
}
#media(min-width: 1700px) and (max-width: 1799px) {
.container_mop{
width: 1700px;
background-color: red;
}
}
#media(max-width: 480px) {
.odstepNadMenuFront {
background-color: red;
height: 120px;
}
.logo_top {
padding-top: 50px;
width: 90%;
}
.navbar_odstep {
padding-top: 50px;
padding-bottom: 0px;
}
.navbar_odstep{
padding:0 ;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid container_mop">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#"><img src="images/logo.png" class="center img-responsive logo_top"></a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left navbar_odstep">
<li class="mopy_menu_1">O mnie</li>
<li class=" mopy_menu_1 dropdown ">
gabinet <span class="caret"></span>
<ul class="dropdown-menu dropdownPadding">
<li class=" mopy_menu_dropdown">- Gdzie przyjmuje </li>
<li class=" mopy_menu_dropdown">- Badania </li>
<li class=" mopy_menu_dropdown">- Zabiegi</li>
<li class=" mopy_menu_dropdown">- Przygotowanie </li>
</ul>
</li>
<li class="mopy_menu_1">Usługi</li>
<li class="mopy_menu_1">Cennik</li>
<li class="mopy_menu_1">Artykuły</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar_odstep">
<li class="mopy_menu_1">Kontakt</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>