How can I close the dropdown menu in the navbar when an option is clicked after it switches to a mobile view?
Below is the HTML code for my navbar.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<%= link_to locale_root_path(anchor: "top"), class: "navbar-brand page-scroll" do %>
<span class="text-red">Light</span><span class="text-blue">Be Corp</span>
<% end %>
</div>
<button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fas fa-bars"></i> </button>
<!-- Navbar content goes here -->
</div>
<!-- /.container -->
</nav>
I have managed to achieve this with a regular dropdown menu. For more information, visit this post.
$("#navbarDropdown").dropdown('hide')
I need assistance with implementing this feature on the navbar itself. I have tried the following approaches but none of them seem to work.
$(".collapse").dropdown('hide')
$(".navbar-main-collapse").dropdown('hide')
$(".navbar-nav").dropdown('hide')