title: How to use multiple dropdowns in navbar?
body: <p>I have a navbar with icons and I want that 2 icons have a seperate dropdown menu. This is my code:</p>
  
  <pre><code>&lt;div class="master-menu-right-wrapper"&gt;
      &lt;div class="master-menu-right-item"&gt;&lt;i class="icon-notifcation"&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;div class="master-menu-right-item" id="add-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;&lt;i class="icon-add"&gt;&lt;/i&gt;&lt;/div&gt;
  
      //this is not working
      &lt;div class="dropdown-menu master-menu-dropdown" aria-labelledby="add-menu"&gt;
          &lt;a class="dropdown-item" href="#"&gt;New member&lt;/a&gt;
          &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
          &lt;a class="dropdown-item" href="#"&gt;New admin&lt;/a&gt;
      &lt;/div&gt; //this is not working
  
      &lt;div class="master-menu-right-item"&gt;&lt;i class="icon-setting"&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;div class="master-menu-right-item master-menu-right-user"&gt;
          &lt;div class="master-menu-right-user-font"&gt;Username&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="master-menu-right-item" id="app-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt;&lt;/div&gt;
      //works
      &lt;div class="dropdown-menu master-menu-dropdown" aria-labelledby="app-menu"&gt;
          &lt;label&gt;Welcome&lt;/label&gt;
          &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
          &lt;a class="dropdown-item" href="#"&gt;App 1&lt;/a&gt;
          &lt;div class="btn-group" role="group"&gt;
              &lt;button type="button" class="btn btn-primary mr-5"&gt;Save&lt;/button&gt;
              &lt;button type="button" class="btn btn-dark"&gt;Edit profile&lt;/button&gt;
          &lt;/div&gt;
          //works
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I add one drop down its works when I click on the <strong>user icon</strong>. When I add second drop down it wil overwrite the previous one and I don't get two separate drop downs. </p>
  
  <p>NOTE</p>
  
  <p>I don't want a nested drop menu or multi level. Just 2 separate drop downs for each icon. </p>
  
  <p>I have tried this solution:</p>
  
  <p><a href="https://stackoverflow.com/questions/21739236/multiple-drop-down-menus-per-button-group">Multiple drop-down menus per button group?</a></p>
  
  <p>This doesn't work for me because the styling will mess up. </p>
  
  <p>How can I have two drop down menu for each icon? </p>
  
  <p>UPDATE:</p>
  
  <p><a href="https://i.stack.imgur.com/LJzYZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LJzYZ.png" alt="image"></a></p>
  
  <p>UPDATE: </p>
  
  <p>CSS code:</p>
  
  <pre><code> .master-menu-right-wrapper {
              float: right;
              width: auto;
              text-align: right;
              cursor: pointer;
              user-select: none;
          }
  
          .master-menu-right-item {
              display: inline-block;
              padding-top: 4px;
              height: 48px;
              font-size: 1.6rem;
              text-align: center;
          }
  
  
          .master-menu-right-user-font {
              display: inline-block;
              font-size: 1rem;
          }
  
          .master-menu-right-user {
              margin-top: -10px;
              padding-left: 10px;
              border-left: thin solid #041348;
          }
  </code></pre>