CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Danny
Danny

Reputation: 301

Bootstrap menu (nav) collapse horizontally instead of vertical

enter image description herei'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>

Upvotes: 0

Views: 16245

Answers (3)

Joe Kdw
Joe Kdw

Reputation: 2261

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>

Upvotes: 3

isherwood
isherwood

Reputation: 61056

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

Upvotes: 0

nolawi
nolawi

Reputation: 4649

Just add the class nav-stacked

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

you also have navbar-right twice.. remove that

Upvotes: 2

Related Questions