title: Trying to fit in Caret with this nav menu
body: <p><a href="https://jsfiddle.net/alachgar/L0bxjncz/3/" rel="nofollow noreferrer">https://jsfiddle.net/alachgar/L0bxjncz/3/</a></p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css&quot; /&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css&quot; /&gt;
  &lt;link href=&quot;https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
  &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  
  &lt;/head&gt;
  </code></pre>
  
              
              
                             
  <pre><code>                &lt;a href=&quot;#mobileMenu&quot; id=&quot;mobileBar&quot; class=&quot;d-none ml-auto&quot;&gt; &lt;i class=&quot; &quot;&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
                      &lt;ul class=&quot;navbar-nav ml-md-auto justify-content-end&quot; id=&quot;nav&quot;&gt;
                          &lt;li class=&quot;nav-item active&quot;&gt;
                              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item dd&quot;&gt;
                              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Justice Server &lt;span class=&quot;sr-only&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item dd&quot;&gt;
                              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Westlaw &lt;span class=&quot;sr-only&quot;&gt; &lt;/span&gt;&lt;/a&gt;
                              
                          &lt;/li&gt;
                          
                          &lt;li&gt;
                              
                              &lt;a class=&quot;nav-link dropdown-toggle&quot; data-toggle = &quot;dropdown&quot;  href = &quot;#&quot;&gt;LSNC SPN &lt;span class = &quot;caret sr-only&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class=&quot;dropdown-menu&quot;&gt;
                                  &lt;?php
                                  $conn = new mysqli('localhost', '.....', '.......', 'portal') or die(&quot;Database Connection Failed&quot;);
                                              
                                  //Below We are connectin to Database and getting all items for our Menu.
                                  $sql = &quot;SELECT * FROM categories&quot;;
                                  $res = mysqli_query($conn, $sql);
                                      while ($row = mysqli_fetch_array($res)) 
                                          {
                                              echo &quot;&lt;li class='dropdown-item'&gt;&lt;a href='$base_url/admin/downloads.php?idx={$row['cat_code']}'&gt;&lt;span &gt;{$row['cat_name']}&lt;span&gt;&lt;/a&gt;&lt;/li&gt;&quot;;
                                          }   
                                  ?&gt;
                              &lt;/ul&gt;                                   
                              
                          &lt;/li&gt;
  
                          &lt;li class=&quot;nav-item dd&quot;&gt;
                              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt; LSNC Sites &lt;span class=&quot;sr-only&quot;&gt; &lt;/span&gt;&lt;/a&gt;
                              &lt;ul class=&quot;list-unstyled dropdownMenu&quot;&gt;
                                  &lt;li&gt;
                                      &lt;a href=&quot;#&quot;&gt; LSNC Web&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href=&quot;#&quot;&gt; Calfresh&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href=&quot;#&quot;&gt; Regulations&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href=&quot;#&quot;&gt; Cases&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item dd&quot;&gt;
                              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt; Pika &lt;span class=&quot;sr-only&quot;&gt;&lt;/span&gt;&lt;/a&gt;                    
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item dd&quot;&gt;
                              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Your JS Cases &lt;span class=&quot;sr-only&quot;&gt;&lt;/span&gt;&lt;/a&gt;                    
                          &lt;/li&gt;
                          &lt;li class=&quot;nav-item dd&quot;&gt;
                              &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Events &lt;span class=&quot;sr-only&quot;&gt;&lt;/span&gt;&lt;/a&gt;                   
                          &lt;/li&gt;   
                          &lt;li class=&quot;nav-item dd&quot;&gt;
                              &lt;a class=&quot;nav-link&quot; href=&quot;logout.php&quot;&gt;Logout &lt;span class=&quot;sr-only&quot;&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  
      &lt;/header&gt;   
      
      
      
  </code></pre>
  
  <p>I an trying to fit in a dropdown menu with this navbar, all items are good except when I query items from my MySql table, results shift to far left, I want items to display underneath the Main dropdown menu (LSNC SPN).
  I tried all kind of combinations no luck.
  Every help is appreciated.
  Thank you.</p>