Bootstrap menu (nav) collapse horizontally instead of vertical

Question

enter image description here i'm using this Html /css for and the menu(bootstrap nav ) and it is always horizontal on a small screen / mobile device. that I want it / need it to be vertical.i'm using bootstrap 3.2

<div class="navbar navbar-inverse navbar-fixed-top">
    <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>

            <a href="home/index" class="navbar-brand">
                <img src="../../Images/Logo.gif" alt="" class=" left img-rounded img-responsive noborder " />
            </a>
        </div>
        <div class="collapse navbar-collapse ">
            <ul class="nav navbar-right  nav-pills navbar-right ">
                <li>@Html.ActionLink("1", "Index", "ContactUs")</li>
                <li>@Html.ActionLink("2", "Allpictuers", "Home")</li>
                <li>@Html.ActionLink("3", "Index", "Courses")</li>
                <li>@Html.ActionLink("4", "Events", "Home")</li>
                <li>@Html.ActionLink("5", "OurStafMembers", "Home")</li>
                <li>@Html.ActionLink("6", "Index", "Abouts")</li>
                <li>@Html.ActionLink("7", "Index", "Home")</li>
                <li>@Html.ActionLink("8", "Index", "English")</li>
                @*<li>>@Html.ActionLink("Thisis _Layout", "Index", "English")</li>*@

                @if (User.Identity.IsAuthenticated)
                {
                    <li>  @Html.Partial("_LoginPartial")</li>
                    <li>@Html.ActionLink("Admin", "Index", "admin")</li>
                }
            </ul>
        </div>

This is the render Html:

/ ...

            <ul class="nav navbar-right  nav-pills ">
                <li><a href="/ContactUs">1</a></li>
                <li><a href="/Home/Allpictuers">2</a></li>
                <li><a href="/Courses">3</a></li>
                <li><a href="/Home/Events">4</a></li>
                <li><a href="/Home/OurStafMembers">5</a></li>
                <li><a href="/Abouts">6</a></li>
                <li><a href="/">7</a></li>
                <li><a href="/English">8</a></li>
            </ul>
        </div>
    </div>
</div>

What, exactly, is horizontal? Please show a demo or at least a screen shot. — isherwood, Feb 25 '15 at 14:24
all the links (1,2,3, ect' ) are displaying horizontal on a small screen (instead of vertical ) — Danny, Feb 25 '15 at 14:39
Please show rendered HTML and not your server-side code. Bootstrap doesn't care about that. — isherwood, Feb 25 '15 at 15:19
how is the size of the image since the default size is 50px height? — Joe Kdw, Feb 25 '15 at 15:28
The image is 100 px, but I have the same problem with or without the image — Danny, Feb 25 '15 at 15:36

Joe Kdw · Accepted Answer · 2015-02-25T18:05:19.467

3

UPDATED: (Use <ul class="nav navbar-nav"> instead of nav-pills and friends.)

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#"><img src=""/></a>

        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right" style="padding-right:2%;">
                <li><a href="#">1</a>
                </li>
                <li><a href="#">2</a>
                </li>
                <li><a href="#">3</a>
                </li>
                <li><a href="#">4</a>
                </li>
                <li><a href="#">5</a>
                </li>
                <li><a href="#">6</a>
                </li>
                <li><a href="#">7</a>
                </li>
            </ul>

edited Feb 25 '15 at 18:05

answered Feb 25 '15 at 16:14

Joe Kdw

2,245
1
21
38

the nav-stacked on a wide screen also in your Demo keep the menu open and vertical. in a wide screen I need it to be horizontal – Danny Feb 25 '15 at 17:36
Then you should use
– Joe Kdw Feb 25 '15 at 17:45
Yes , it look like nav-pills fix the problem .Please update you nswer so I can mark it – Danny Feb 25 '15 at 17:50
are you sure that's what you want and you feel solved successfully? – Joe Kdw Feb 25 '15 at 17:57
It look like . thanks . – Danny Feb 25 '15 at 18:00
no problem, I learn much too about nav-pills and friends :D thanks – Joe Kdw Feb 25 '15 at 18:02

score 2 · Answer 2 · answered Feb 25 '15 at 14:50

2

Just add the class nav-stacked

<ul class="nav navbar-right  nav-pills nav-stacked">
 ...
</ul>

you also have navbar-right twice.. remove that

answered Feb 25 '15 at 14:50

nolawi

4,439
6
22
45

nav-stacked is just keeping it open all time and include wide screen – Danny Feb 25 '15 at 15:40

score 0 · Answer 3 · answered Feb 25 '15 at 15:22

Bootstrap nav links are stacked by default for mobile. My best guess is that your rendered HTML doesn't have anchors inside the list items. Bootstrap uses the anchors as CSS targets, not the list items.

If your output looks like this it will work as expected with no changes:

<li><a href="#">Link text</a></li>

Demo

Bootstrap menu (nav) collapse horizontally instead of vertical

3 Answers3

Linked