Struggling with nesting .nav-pills within another .nav-pills (utilizing bootstrap3). Could the issue be related to the nested JS in the pill-content?
I am aiming to construct a single-page website using the default JS nav pills for seamless navigation through all the content on one page. Two of the tabs contain their own JS elements, such as a carousel on the home tab and another set of nav pills.
<ul class="nav nav-pills">
<li><a href="#home" data-toggle="pill"><span class="glyphicon glyphicon-home" >Home</a></li>
<li><a href="#menu" data-toggle="pill"><span class="glyphicon glyphicon-cutlery"> Menu</a></li>
<li><a href="#about" data-toggle="pill">About Us</a></li>
<li><a href="#contact" data-toggle="pill">Contact Us</a></li>
<li><a href="#directions" data-toggle="pill">Directions</a></li>
</ul><!-- End Nav pills -->
<!-- Pill panes -->
<div class="pill-content">
<div class="pill-pane active" id="home">
<!-- Carousel -->
<div id="carousel-with-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-with-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-with-captions" data-slide-to="1"></li>
<li data-target="#carousel-with-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src='img\carousel\N2.-Pad-Sea-Ewew.jpg' width="100%" alt="First slide image">
<div class="carousel-caption">
<h3>N2. Pad Sea Ewew (ผัดซีอิ๋ว)</h3>
<p>Stir fried thick rice noodles with egg, Chinese broccoli, broccoli and beansprouts in sweet black soy sauce.</p>
</div>
</div>
<div class="item active">
<img src="C:\Users\Eduardo\Desktop\Pi's Thai\img\carousel\N1.-Pad-Thai.jpg" width="100%" alt="Second slide image">
<div class="carousel-caption">
<h3>N1. Pad Thai (ผัดไทย)</h3>
<p>Notably known worldwide, our Pad Thai is made with thin rice noodles stir-fried with your choice of meat, egg, bean sprouts, and green onions. Topped with crushed peanuts and lime on the side for added crunch and flavor!</p>
</div>
</div>
<div class="item">
<img src="C:\Users\Eduardo\Desktop\Pi's Thai\img\carousel\N3.-Pad-Rard-Na.jpg" width="100%" alt="Third slide image">
<div class="carousel-caption">
<h3>N3. Pad Rard Na (ราดหน้า)</h3>
<p>Stir-fried thick rice noodles topped with sautéed broccoli and Chinese broccoli in soybean paste brown gravy.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-with-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-with-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- End Carousel -->
</div><!-- End Pill pane home -->
<div class="pill-pane" id="menu">
<ul class="nav nav-pills">
<li class="active"><a href="#Noodles" data-toggle="pill">Noodles</a></li>
<li><a href="#FriedRice" data-toggle="pill">Fried Rice</a></li>
<li><a href="#Entrees" data-toggle="pill">Entrees</a></li>
<li><a href="#Soups-Salads" data-toggle="pill">Soups & Salads</a></li>
</ul>
<div class="pill-content">
</div>
</div><!-- End Pill pane menu -->
<div class="pill-pane" id="about">
<h3>About Us</h3>
<p>We reside in a wild jungle</p>
</div><!-- End Pill pane about us -->
<div class="pill-pane" id="contact"
></div><!-- End Pill pane contact us -->
<div class="pill-pane" id="directions"
></div><!-- End Pill pane directions -->
</div><!-- End Pill panes -->