CODEWITHSUNDEEP
tabsnavbootstrap-5
Franklin
Franklin

Reputation: 121

Bootstrap nav-tab not conveying visually "active" state correctly

I can click on my tabs and my tab-content displays like I expect, but my "active" nav tab is not displaying properly and I'm not sure how to troubleshoot the issue. See a picture below for reference.

My Nav-menu

The far left tab is "active" yet the nav-menu shows the line below the "active" tab conveying it's not active? Here is Bootstrap's example below to compare.

Bootstrap Nav-menu

I am creating my nav-tabs dynamically by looping through data and it has only started acting differently, recently. Is this a Javascript issue or a Bootstrap component ?

<ul class="nav nav-tabs" id="network-navigation-tabs" role="tablist">
   <li class="nav-item" role="presentation">
      <button class="nav-link network-tab all-networks active" id="all-networks-  tab" data-bs-toggle="tab" data-bs-target="#all-networks" type="button" role="tab" aria-selected="true">
         All Networks
         <br><br>
      </button>
   </li>
   <li class="nav-item" role="presentation">
      <button class="nav-link network-tab lan" id="lan1-tab" data-bs-toggle="tab" data-bs-target="#lan1" type="button" role="tab" aria-selected="false">
         Local Area Network
         <div>
            ...
         </div>                    
      </button>
   </li>
   <li class="nav-item" role="presentation">
      <button class="nav-link network-tab transport" id="transport-tab" data-bs-toggle="tab" data-bs-target="#transport" type="button" role="tab" aria-selected="false">
         Transport
         <br><br>
      </button>
   </li>
   <li class="nav-item" role="presentation">
      <button class="nav-link network-tab loopback" id="loopback-tab" data-bs-toggle="tab" data-bs-target="#loopback" type="button" role="tab" aria-selected="false">
         Loopback
         <br><br>
      </button>
   </li>
</ul>

Upvotes: 1

Views: 303

Answers (1)

Franklin
Franklin

Reputation: 121

I have resolved the issue, although I am not sure how part of HTML code affected it.

My problem was a dynamic list I was displaying at an earlier point on the page was causing the nav-tabs to not properly be displayed. Although the HTML code looked right, I modified the HTML from using div tags to ul & li tags.

Old Method

{begin forloop}
  <div>
     <a href=#>
        ...
     </a>
  </div>
{end forloop}

New Method

<ul>
   {begin forloop}
      <li>
         <a href=#>
            ...
         </a>
      </li>
   {end forloop}
</ul>

Any insight as to why that made my nav-tabs perform properly would be appreciated!

Upvotes: 1

Related Questions