Layout of navigation sub-menu needs tweaks

[DanielBaird]

Kristin from Aquaculture pointed out that her subnav looks crappy, and she anticipated getting feedback about how bad it looked.

She originally asked if she could have two rows of three links, but when i described how setting a fixed number across would apply to any number of links, she decided she would actually prefer a single row, with the text of the links wrapping internally as necessary to fit.

forcing a single row would hurt when there are lots of links.. I wonder if there's a layout with display: table or flexbox that sets a narrow min-width, so the links will wrap internally to try to fit in a single row before they wrap to a second row.

It might also help to have some top border or shading for indicating that links in additional rows are not connected to the link above them.

[DanielBaird]

At least, I'm fairly sure that person's name is Kristin.

[DanielBaird]

I've kept this sample HTML in my editor for a while, here it is for the next person to work on this issue:

<!-- kristin's navbar -->

<div class="col-xs-12 p-x-0">
    <nav class="navbar navbar-dark bg-inverse" aria-label="Section navigator">
      <button class="navbar-toggler pull-xs-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#subNav" aria-controls="subNav" aria-expanded="false" aria-label="Toggle secondary navigation">
        ≡
      </button>
      <div class="navbar-brand hidden-lg-up">
        In this section… <small>(6 pages)</small>
      </div>
      <div class="collapse navbar-toggleable navbar-toggleable-md navbar-scrollable" id="subNav">
        <ul class="nav navbar-nav">

<li class="nav-item "><a class="nav-link" href="https://www.jcu.edu.au/tropical-fisheries-and-aquaculture/research/aquaculture-research/_noproxycache">Aquaculture Research</a></li>

<li class="nav-item "><a class="nav-link" href="https://www.jcu.edu.au/tropical-fisheries-and-aquaculture/research/sustainable-wild-fisheries/_noproxycache">Sustainable Fisheries</a></li>

<li class="nav-item "><a class="nav-link" href="https://www.jcu.edu.au/tropical-fisheries-and-aquaculture/research/novel-aquatic-products-and-applications/_noproxycache">Novel aquatic products</a></li>

<li class="nav-item "><a class="nav-link" href="https://www.jcu.edu.au/tropical-fisheries-and-aquaculture/research/aquatic-animal-health/_noproxycache">Aquatic Animal Health</a></li>

<li class="nav-item "><a class="nav-link" href="https://www.jcu.edu.au/tropical-fisheries-and-aquaculture/research/seafood-health-and-allergens/_noproxycache">Seafood &amp; Allergens </a></li>

<li class="nav-item "><a class="nav-link" href="https://www.jcu.edu.au/tropical-fisheries-and-aquaculture/research/human-dimensions-of-aquatic-resources-and-production/_noproxycache">Human dimensions</a></li>

        </ul>
      </div>
    </nav>
  </div>