title: Navbar Bootsrap 4 doesn't toggle (scss?)
body: <p>I have customize my bootstrap. Everything works except navbar toggle. You can view my website at <a href="http://www.ideastud.io" rel="nofollow noreferrer">http://www.ideastud.io</a>.</p>
  
  <h1>Intro</h1>
  
  <p>I have 4 SCSS to customize bootstrap:</p>
  
  <ul>
  <li>common_begin (to customize grid-breakpoints, override variables, ...)</li>
  <li>theme1 (to customize colors and add theme1 styles)</li>
  <li>theme2 (to customize colors and add theme2 styles)</li>
  <li>common_end (to add classes or customize bootstrap classes for both themes)</li>
  </ul>
  
  <p>On my HTML code, I use theme1 or theme2 (compiled by gulp). Theme1 and theme2 have the same hierarchy:</p>
  
  <pre><code>// override bootstrap variables
  
  // import common styles 
  @import "common_begin.scss";
  
  // import some bootstrap :
  @import "../lib/bootstrap/scss/_functions.scss";
  @import "../lib/bootstrap/scss/_variables.scss";
  @import "../lib/bootstrap/scss/_mixins.scss";
  
  @import "../lib/bootstrap/scss/bootstrap.scss";
  
  // theme styles
  @import "theme1.scss";
  
  </code></pre>
  
  <blockquote>
    <p>I don't think bootstrap generation is the cause of the problem below.</p>
  </blockquote>
  
  <h1>Issue</h1>
  
  <p>In my layout, I have a navbar... and the toggler does not work... I don't know why (Yet this is not the first time that I implement bootstrap) :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;header&gt;
      &lt;a class="d-flex justify-content-center" href="/"&gt;
          &lt;img src="/images/logo-ideastudio.png" height="50" class="d-inline-block align-top m-1" alt=""&gt;
      &lt;/a&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-light bg-transparent"&gt;
          &lt;div class="container"&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse"
                      data-target="#navbarSupportedContent"
                      aria-controls="navbarSupportedContent"
                      aria-expanded="false"
                      aria-label="Toggle navigation"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
                  &lt;ul class="navbar-nav"&gt;
                      &lt;li class="nav-item active"&gt;&lt;a class="nav-link" asp-page="/"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" asp-page="/go/olymp"&gt;Olymp&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" asp-page="/go/team"&gt;Equipe&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" asp-page="/go/expertises"&gt;Expertises&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" asp-page="/go/trainings"&gt;Formations&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" asp-page="/go/projects"&gt;Clients&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" asp-page="/go/about"&gt;À propos&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <h1>Resolution attempts</h1>
  
  <h2>Change the list approach</h2>
  
  <p>And because [bootstrap] use classes for their <code>nav</code>s, [we] can avoid the list-based approach entirely if you like (<a href="https://getbootstrap.com/docs/4.3/components/navbar/#nav" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.3/components/navbar/#nav</a>), I have try to replace <code>ul</code>/<code>li</code> by <code>div</code>s, like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;header&gt;
      &lt;a class="d-flex justify-content-center" href="/"&gt;
          &lt;img src="/images/logo-ideastudio.png" height="50" class="d-inline-block align-top m-1" alt=""&gt;
      &lt;/a&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-light bg-transparent"&gt;
          &lt;div class="container"&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse"
                      data-target="#navbarSupportedContent"
                      aria-controls="navbarSupportedContent"
                      aria-expanded="false"
                      aria-label="Toggle navigation"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
                  &lt;div class="navbar-nav"&gt;
                      &lt;a class="nav-item nav-link" href="/"&gt;Accueil&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="/go/olymp"&gt;Olymp&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="/go/team"&gt;&amp;Eacute;quipe&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="/go/expertises"&gt;Expertises&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="/go/trainings"&gt;Formations&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="/go/projects"&gt;Clients&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="/go/press"&gt;Presse&lt;/a&gt;
                      &lt;a class="nav-item nav-link" href="/go/about"&gt;About&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Deliberately, I have not a Navbar brand.</p>
  
  <h2>Check some essentials</h2>
  
  <p>I have the same id for data-target attribute, etc. I have paste the original sample on about (à propos) page if you want to try. I think I have already check all steps... I you have an Idea... </p>
  
  <h2>Update</h2>
  
  <p>I have tried to update bootstrap 4.2.1 to 4.3.1</p>