I am working with a Bootstrap nav-bar that collapses into a button by default.
Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size.
Is there a way to customize this behavior?
Can I provide an alternative menu to display when the nav-bar is collapsed?
Below is an example of the code using default Bootstrap styling:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#FlagMenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Select plant</a>
</div>
<div class="collapse navbar-collapse" id="FlagMenu">
<ul class="nav navbar-nav">
<li>
<img src="~/Content/imgs/Flag_Dansk.png" />
</li>
<li>
<img src="~/Content/imgs/Flag_Tjekkisk.png" />
</li>
<li>
<img src="~/Content/imgs/Flag_Mexikansk.png" />
</li>
<li>
<img src="~/Content/imgs/Flag_Ungarsk.png" />
</li>
<li>
<img src="~/Content/imgs/Flag_China.png" />
</li>
</ul>
</div>
</div>
</nav>