(Bootstrap 3) How to keep my bottom navbar instead of a 3 span icon

Question

So, I'm kinda new to MVC since I started using it like 3 weeks ago.

I'm working with a Web Application which I intend to implement the following property:

I've got a navbar on the bottom of the page which includes some Html.ActionLink's, each one with its glyphicon and text. What I want to do is, when I reduce the window size to a certain level, instead of having the typical button made of 3 span icons which expands my bottom navbar, I intend to have the same bar as it is on fullscreen but just with the icons visible and without text.

The code I've got so far for this section is this:

<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("Início", "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(" Estado", "Edit/4", "Estado_Motoristas", new { area = "" }, new { @class = "glyphicon glyphicon-random" })</li>
                    <li>@Html.ActionLink(" Pesquisa", "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(" Formulário", "Index", "Home", new { area = "" }, new { @class = "glyphicon glyphicon-file" })</li>
                    <li>@Html.ActionLink(" Mensagens", "Index", "Home", new { area = "" }, new { @class = "glyphicon glyphicon-envelope" })</li>
                    <li>@Html.ActionLink(" Definições", "Index", "Manage", new { area = "" }, new { @class = "glyphicon glyphicon-cog" })</li>
                </ul>
            </div>
        </div>
    </div>

What can I do to solve my problem? Any viable tip?

Thanks in advance!

have a look here for some guidance http://getbootstrap.com/components/#navbar — Scanner, Nov 30 '15 at 11:09
This is also worth a look, as it seems your issue is the same on this post http://stackoverflow.com/questions/20219796/bootstrap-collapse-menu-disappears-when-resizing-screen — Scanner, Nov 30 '15 at 11:16
I've checked both of your suggestions and the second one was pretty helpful so far, at least now my navbar doesn't collapse even in a small size. Now I just need to find a way to set that it shall stay horizontal, without text and keep the icons, instead of going vertical. — Granvic, Nov 30 '15 at 11:23
I ran a test of your code and removed navbar-collapse collapse, which allowed the text to stay as you wanted but the icons remain which isn't what you want — Scanner, Nov 30 '15 at 11:25

Scanner · Accepted Answer · 2015-11-30T15:51:46.860

0

Ok so, firstly I removed your class="navbar-collapse collapse" from your second div. This ensured that the menu won't collapse into the button. Secondly I removed your glyphicons and repositioned these within a span class. I wrapped each of your ActionLink inside the spans. Then I altered the class of your ActionLink to hidden-xs. This means that when the screen is reduced only the icons remain and the text disappears. And when the screen is full-size the text and icons appear. A good reference is here responsive-utilities.

<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("Início", "Index", "Home", new { area = "" })&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li><span class="glyphicon glyphicon-random"></span><span>@Html.ActionLink(" Estado", "Edit/4", "Estado_Motoristas", new { area = "" }, new { @class = "hidden-xs" })&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
            <li><span class="glyphicon glyphicon-search"></span><span>@Html.ActionLink(" Pesquisa", "Index", "Pracas", new { area = "" }, new { @class = "hidden-xs" })</span>&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><span class="glyphicon glyphicon-road"></span><span>@Html.ActionLink(" GPS", "Index", "GPS", new { area = "" }, new { @class = "hidden-xs" })</span>&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><span class="glyphicon glyphicon-file"></span><span>@Html.ActionLink(" Formulário", "Index", "Home", new { area = "" }, new { @class = "hidden-xs" })</span>&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><span class="glyphicon glyphicon-envelope"></span><span>@Html.ActionLink(" Mensagens", "Index", "Home", new { area = "" }, new { @class = "hidden-xs" })</span>&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><span class="glyphicon glyphicon-cog"></span><span>@Html.ActionLink(" Definições", "Index", "Manage", new { area = "" }, new { @class = "hidden-xs" })</span></li>
        </ul>
    </div>
</div>

edited Nov 30 '15 at 15:51

answered Nov 30 '15 at 11:46

Scanner

597
1
9
19

Ok, now I've got ALMOST what I want, I just can't align the icons with the text when it's full sized – Granvic Nov 30 '15 at 12:12
Inicio isn't aligned properly, is this what you're referring too? – Scanner Nov 30 '15 at 14:29
@Granvic please check my edit above. I've added new spans to each
, as well as adding nbsp; so that each link is spaced out

Scanner

Nov 30 '15 at 14:52

@Granvic please check my re-edit. The first one was fine, but this just formats it a bit more and makes it look more structured – Scanner Nov 30 '15 at 15:07

I keep getting the text under the icons on full screen, instead of being on the right side of each icon – Granvic Nov 30 '15 at 15:15

For me it's appearing to the right. What browser are you using? – Scanner Nov 30 '15 at 15:17

This is what I want in full screen - http://i.imgur.com/y8bcqFM.png And this in a smaller screen - http://i.imgur.com/btx1VHK.png – Granvic Nov 30 '15 at 15:18

Google Chrome, latest version – Granvic Nov 30 '15 at 15:20

I think we are seeing different things. I've tested it on IE and it looks perfectly fine for me. As you can see above, this is how it appears for me. Albeit Inicio isn't on the same line, but I'm trying to resolve that at the moment – Scanner Nov 30 '15 at 15:29

Missing rectified. I also removed class from Inicio which allows it to fit on the same line as the other links. Check out the new image above – Scanner Nov 30 '15 at 15:47

If you've a CSS file, add a new class to

and use padding to style it. This should correct your issue

– Scanner Nov 30 '15 at 15:55

score 0 · Answer 2 · answered Nov 30 '15 at 11:47

Try to add this may help you in html place

<button class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" type="button">
<a class="brand" href="/">Digrin</a>
</button>

and in style

.navbar-toggle
{
background:#f8f8f8;
border:none;
}

(Bootstrap 3) How to keep my bottom navbar instead of a 3 span icon

2 Answers2