title: Bootstrap 4: How Do I Close The Main Dropdown Navbar after clicking a Menu Option?
body: <p>When the navbar switches to a dropdown menu, I want to close it when an option is clicked. </p>
  
  <p>Here is my navbar html.</p>
  
  <pre><code>&lt;nav class="navbar fixed-top navbar-expand-lg navbar-custom"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;%= link_to locale_root_path(anchor: "top"), class: "navbar-brand page-scroll" do %&gt;
          &lt;span class="text-red"&gt;Light&lt;/span&gt;&lt;span class="text-blue"&gt;Be Corp&lt;/span&gt;
        &lt;% end %&gt;
      &lt;/div&gt;
      &lt;button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target=".navbar-main-collapse"&gt; &lt;i class="fas fa-bars"&gt;&lt;/i&gt; &lt;/button&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse navbar-right navbar-main-collapse"&gt;
  
        &lt;ul class="navbar-nav ml-auto"&gt;
          &lt;!-- Hidden li included to remove active class from about link when scrolled up past about section --&gt;
          &lt;li class="hidden"&gt; &lt;a href="#top"&gt;&lt;/a&gt; &lt;/li&gt;
          &lt;li class="nav-item nav-link"&gt;&lt;%= link_to "#{t :link_about}", locale_root_path(anchor: "about"), class: "page-scroll" %&gt;&lt;/li&gt;
          &lt;li class="nav-item nav-link"&gt;&lt;%= link_to "#{t :link_services}", locale_root_path(anchor: "services"), class: "page-scroll" %&gt;&lt;/li&gt;
          &lt;li class="nav-item dropdown"&gt;
            &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                &lt;%= "#{t :link_products}" %&gt;
            &lt;/a&gt;
            &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
              &lt;div class="dropdown-item"&gt;&lt;%= link_to "#{t :link_app}", locale_root_path(anchor: "games"), class: "page-scroll" %&gt;&lt;/div&gt;
              &lt;div class="dropdown-item"&gt;&lt;%= link_to "#{t :link_vr}", locale_root_path(anchor: "vrsection"), class: "page-scroll" %&gt;&lt;/div&gt;
              &lt;div class="dropdown-item"&gt;&lt;%= link_to "#{t :link_tesserart}", locale_root_path(anchor: "tesserartview"), class: "page-scroll" %&gt;&lt;/div&gt;
              &lt;div class="dropdown-item"&gt;&lt;%= link_to "#{t :link_books}", locale_root_path(anchor: "booksview"), class: "page-scroll" %&gt;&lt;/div&gt;
              &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
              &lt;div class="dropdown-item"&gt;&lt;%= link_to "#{t :link_home}", locale_root_path %&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item nav-link"&gt;&lt;%= link_to "#{t :link_portfolio}", locale_root_path(anchor: "works"), class: "page-scroll" %&gt;&lt;/li&gt;
          &lt;li class="nav-item nav-link"&gt;&lt;%= link_to "#{t :link_contact}", locale_root_path(anchor: "contact"), class: "page-scroll" %&gt;&lt;/li&gt;
          &lt;li class="nav-item nav-link"&gt;&lt;%= link_to "#{t :link_story}", story_path %&gt;&lt;/li&gt;
          &lt;li class="nav-item nav-link"&gt;&lt;%= link_to "#{t :link_blog}", blog_path %&gt;&lt;/li&gt;
          &lt;li class="nav-item nav-link"&gt;&lt;%= link_to "https://www.facebook.com/LightBeCorp/", target: "_blank" do %&gt;&lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;&lt;% end %&gt;&lt;/li&gt;
          &lt;li class="nav-item nav-link"&gt;&lt;%= link_to "https://twitter.com/lightbecorp", target: "_blank" do %&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;% end %&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- /.navbar-collapse --&gt; 
    &lt;/div&gt;
    &lt;!-- /.container --&gt; 
  &lt;/nav&gt;
  </code></pre>
  
  <p>I figured out how to do this with a regular dropdown menu. The details about this are on this <a href="https://stackoverflow.com/questions/55735577/bootstrap-4-how-do-i-close-a-dropdown-menu-when-a-dropdown-item-is-clicked">post</a>.</p>
  
  <pre><code>$("#navbarDropdown").dropdown('hide')
  </code></pre>
  
  <p>I need help on how to develop the code for the navbar. I tried the following but none of them worked.</p>
  
  <pre><code>$(".collapse").dropdown('hide')
  
  $(".navbar-main-collapse").dropdown('hide')
  
  $(".navbar-nav").dropdown('hide')
  </code></pre>