Bootstrap dropdown nav menu item wrap (wordpress) - css

Question

Having trouble getting the submenu items under "LEARN" to wrap (Articles / Videos).
influentagency.com/clients/cgc_build_062117
I've pasted some of my SASS code, tried different things, but nothing seems to work. Added the wp_bootstrap_navwalker function, tried adding classes, does not wrap no matter what I try.
Any ideas what I'm missing here? Thanks in advance!
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
outline: 0;
background-color: #777;
}
.dropdown-menu {
flex-wrap: wrap;
}
.navbar{
border-radius: 0;
webkit-border-radius: 0;
min-height: 1px;
margin-bottom: 0;
&.navbar-default {
border: none;
background: #fff;
padding: 0 15px;
#navbar-menu{
float: right;
&.navbar-collapse{
padding: 0;
margin: 0;
.navbar-nav{
float: none;
margin: 0;
padding: 0;
li{
display: inline-block;
float: none;
margin: 23px 0 0 0px;
a {
color: #333;
font-size: 14px;
display: block;
text-decoration: none;
#include OpenSansSemiBold;
padding: 4px 8px;
&:hover{
color: #9dcb94;
}
}
&.item-right{
margin-left: 25px;
a{
background: $green;
color: #fff;
border-radius: 2px;
padding: 10px 14px;
&:hover{
background: $green_hover;
}
}
&.current-menu-item,
&.current_page_item,
&.current-menu-ancestor,
&.current-page-ancestor {
a{
color: #fff;
}
}
}
&.current-menu-item,
&.current_page_item,
&.current-menu-ancestor,
&.current-page-ancestor {
a{
color: $green;
}
}
.sub-menu{
display: none;
}
}
}
}
}
}

Answer 1

The issue is that your css is making all menu items display-inline, even ones in the dropdown menus:
.navbar.navbar-default #navbar-menu.navbar-collapse .navbar-nav li{
display: inline-block;
/* other styles here also */
}
You need to include the following in your css to override that:
.navbar.navbar-default #navbar-menu.navbar-collapse .navbar-nav .dropdown-menu li{
display:block;
}
To do this, you need to add the following to your SASS:
.navbar-nav{
[...]
li{
display: inline-block;
[...]
}
.dropdown-menu li { display:block;}
}