Navbar stacking repeat dropdown menus

#1

So, I have created a menu that has a repeat section that creates a dropdown menu. The problem is that for div ID=repeat2, the code creates the dropdowns but they are stacked instead of next to each other. What am I missing?

Below is the navbar code. No fancy CSS, just linked Bootstrap 4.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand mr-auto" href="#">COMPANYNAME</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar1_collapse">
      <div class="navbar-nav nav-justified">
        <div class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="dropdown2" role="button" aria-haspopup="true" aria-expanded="false">National</a>
          <div class="dropdown-menu" aria-labelledby="dropdown2">
            <div id="repeat1" is="dmx-repeat" dmx-bind:repeat="nat_apps.data.query1">
              <a class="dropdown-item" dmx-bind:href="app_link">{{app_name}}</a>
            </div>
          </div>
        </div>
      </div>
      <div id="repeat2" is="dmx-repeat" dmx-bind:repeat="chp_apps.data.repeat1">
        <div class="col">
        <div class="navbar-nav nav-justified">
          <div class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">{{chapter_title}}</a>
            <div class="dropdown-menu" aria-labelledby="dropdown1">
              <div id="repeat3" is="dmx-repeat" dmx-bind:repeat="query2">
                <a class="dropdown-item" dmx-bind:href="{{app_link}}?chapter_id={{chapter_id}}">{{app_name}}</a>
              </div>
            </div>
          </div>
        </div>
        </div>  
      </div>
    </div>
    <div class="collapse navbar-collapse justify-content-end" id="navbar2_collapse">
      <div class="navbar-nav">
        <div class="nav-item dropdown" style="position: static;">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="dropdown3" role="button" aria-haspopup="true" aria-expanded="false">Welcome, {{user_details.data.query1[0].user_fname}} {{user_details.data.query1[0].user_lname}}</a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown3">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </div>
    </div>  
  </nav>
#2

Add a Bootstrap class to each of the lines

image

#3

I am not sure what have you tried exactly but i see two navbar-nav elements on your page.
What is the desired result? What needs to happen on your page? Do you have a working static example?

#4

Well, the navbar is working. I have three dropdowns that show up in the menu. The first one is separate from the second two. All are created using two different ServerConnections and pull the data, “links” in the dropdowns, from a database. Really the problem is more of a style issue. When the dmx-bind:repeat="chp_apps.data.repeat1"loops it creates two dropdown menus and for some reason, the get stack, one dropdown above the other. They function correctly, I just want them side by side.

I don’t have the code out in a public place, so see the pic below:
wappler_menu_help