title: Navbar fixed left - Bootstrap
body: <p>I am trying to make navbar in bootstrap to be fixed left, like on <a href="https://bootsnipp.com/snippets/5lapE#comments" rel="nofollow noreferrer">this link</a>.
  Anyway, it is working, but when I add block content of the leaflet map, my navbar is still there, but I can't click on it. Also, I don't get <a href="https://www.google.rs/search?q=pointer%20mouse&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=0ahUKEwidyNuPhq7dAhVrqIsKHW_CANUQ_AUICigB&amp;biw=1259&amp;bih=894#imgdii=75rnt6Ph_DxW8M:&amp;imgrc=3RXYB-evATnihM:" rel="nofollow noreferrer">pointer mouse</a> when I cross over the link. Here is code which I changed:</p>
  
  <pre><code>&lt;!--NAVBAR--&gt;
          &lt;div class="navbar navbar-inverse navbar-fixed-left"&gt;
            &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
            &lt;ul class="nav navbar-nav"&gt;
             &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
               &lt;ul class="dropdown-menu" role="menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub Menu1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub Menu2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub Menu3&lt;/a&gt;&lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub Menu4&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub Menu5&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
             &lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Link2&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Link3&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Link4&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Link5&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="container col-sm-12"&gt;
              &lt;div class="row"&gt;
                  {% block map_content %}
                          replace me
                  {% endblock map_content %}
              &lt;/div&gt;
          &lt;/div&gt; 
  </code></pre>
  
  <p>Before this, I tried more elegant solution. I used bootstrap4 and tried something like this:</p>
  
  <pre><code>&lt;nav  class="navbar navbar-inverse fixed-left"&gt;
            &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand" href="{% url 'index' %}"&gt;&lt;p class="logo_name"&gt;page name&lt;/p&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;ul class="nav navbar-nav"&gt;
                 &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>But it doesn't work, in this case, my navbar is fixed top, and not left.</p>