Bootstrap navbar does toggle - html

Question

I have the nav bar menu as below. one button for the menu on the left, and one button for the dropdown on the right. When the screen display in small screen the menu is always show but not collapsed.
When I click the button it doesn't collapse the menu.
Could you please advise?
<div class="container">
<div class="navbar navbar-light navbar-expand-lg logo-background container shadow">
<button class="sidebar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">>
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand navbar-brand-custom"><img src="Content/Jeo/images/logo.svg" alt="" class="logo-shape"/></a>
<div class="navbar-text navbar-text-custom">
<div class="application-name"><%=GetResource("Jeo")%></div>
<div class="application-name" style="margin-top: 4px"><%=GetResource("Management")%></div>
</div>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<div class="navbar__menu">
<ul class="navbar-nav">
<li class="nav-item navbar__menu-item active">
<a class="nav-link text-white" href="Default"><%=GetResource("JView")%></a>
</li>
<li class="nav-item navbar__menu-item">
<a class="nav-link text-white" href="TechView"><%=GetResource("TView")%></a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<span class="ua-icon-navbar-open navbar-toggler__open"></span>
<span class="ua-icon-alert-close navbar-toggler__close"></span>
</button>
<div class="dropdown navbar-dropdown" id="navbar-collapse">
<a class="dropdown-toggle navbar-dropdown-toggle navbar-dropdown-toggle__user caret-off" data-toggle="dropdown" href="#">
<asp:Image ID="ImgAvatar" runat="server" class="rounded-circle img-hover" Height="30px" Width="30px" />
</a>
<div class="dropdown-menu navbar-dropdown-menu navbar-dropdown-menu__user">
<asp:LinkButton ID="btnLanguageFrench" runat="server" class="dropdown-item" OnClick="btnLanguageFrench_Click"><%=GetResource("French")%><i class="fas fa-globe fa-pull-right dropdown-item-padding-top"></i></asp:LinkButton>
<asp:LinkButton ID="btnLanguageEnglish" runat="server" class="dropdown-item" OnClick="btnLanguageEnglish_Click"><%=GetResource("English")%><i class="fas fa-globe fa-pull-right dropdown-item-padding-top"></i></asp:LinkButton>
</div>
</div>
</div>
</div>
<div class="body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
Thank you

Answer 1

You can do that with only CSS, and media query to work only for small screen
#media (max-width: 680px) {
.navbar .dropdown-menu.yourclass {
display: block!important;
}
}
Jus add yourclass to that dropdown-menu which you want to keep opan always.
For more examples check http://bootstrap-menu.com