Hey everyone, I'm still getting the hang of MVC as I only started using it around 3 weeks ago.
Currently, I am working on a Web Application where I am trying to implement a specific feature:
At the bottom of the page, I have a navbar with some Html.ActionLink's, each one having its own glyphicon and text. What I aim to achieve is when the window size is reduced to a certain point, instead of the usual button with 3 span icons that expand the navbar, I want the same navbar to remain visible but only display the icons without any text.
Here's the code snippet I have for this section:
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse" aria-label="Right-Align">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Status", "Edit/4", "Estado_Motoristas", new { area = "" }, new { @class = "glyphicon glyphicon-random" })</li>
<li>@Html.ActionLink("Search", "Index", "Pracas", new { area = "" }, new { @class = "glyphicon glyphicon-search" })</li>
<li>@Html.ActionLink("GPS", "Index", "GPS", new { area = "" }, new { @class = "glyphicon glyphicon-road" })</li>
<li>@Html.ActionLink("Form", "Index", "Home", new { area = "" }, new { @class = "glyphicon glyphicon-file" })</li>
<li>@Html.ActionLink("Messages", "Index", "Home", new { area = "" }, new { @class = "glyphicon glyphicon-envelope" })</li>
<li>@Html.ActionLink("Settings", "Index", "Manage", new { area = "" }, new { @class = "glyphicon glyphicon-cog" })</li>
</ul>
</div>
</div>
</div>
Any suggestions on how I can solve this issue? Appreciate any help in advance!