I am experiencing an issue with a carousel embedded within a menu using Twitter Bootstrap.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="carousel slide" id="CarouselTest">
<div class="carousel-inner">
<ul class="nav navbar-nav item active" >
<li>One 1</li>
<li>Two 1</li>
</ul>
<ul class="nav navbar-nav item">
<li>One 2</li>
<li>Two 2</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right" >
<li><a data-slide="prev" href="#CarouselTest" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#CarouselTest" class=""><i class="glyphicon glyphicon-chevron-right"></i></a></li>
</ul>
</div>
</div>
</nav>
Provided is an image displaying the current result:
I attempted to resolve this by adding the following CSS, but it did not make any difference:
<style>
.carousel-inner{
width:500px;
height: 100%;
}
</style>
Furthermore, here is a demo on JSFiddle: http://jsfiddle.net/r8uvfo3s/
If you have any insights on how to address this issue, your assistance would be greatly appreciated. Thank you in advance :)