CODEWITHSUNDEEP
twitter-bootstrap
user1355240
user1355240

Reputation:

Bootstrap - collapsed menu won't open

I'm using boostrap and my collapsed menu won't open. I've include the jquery and bootstrap js files to no avail. My site is http://joseph-anthony-king.com/. The code is as follows:

    <div class="navbar navbar-default">
    <div class="navbar-inner">
        <div class="container">
            <div class="navbar-header">
                <button type="button"
                        class="navbar-toggle"
                        data-toggle="collapse"
                        data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="siteTitle" class="navbar-brand" href="/">Joseph Anthony King</a>
            </div>
            <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav pull-right">
                <li class="dropdown">
                    <a href="/">Home</a>
                </li>
                <li class="dropdown">
                    <a href="/Resume">Resume</a>
                </li>
                <li class="dropdown">
                    <a href="/Downloads">Downloads</a>
                </li>
                <li class="dropdown">
                    <a href="https://joe-king-sample-app.herokuapp.com/" target="_blank">
                        Sample App
                    </a>
                </li>
            </ul>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 5561

Answers (2)

user1355240
user1355240

Reputation:

I found the answer, I had to render the jQuery and bootstrap js libraries as follows:

@Scripts.Render("~/Scripts/jquery-1.9.1.js")
@Scripts.Render("~/Scripts/bootstrap.js")

Upvotes: 0

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

The data-target in your button-tag is wrong it shouldn't be the class, it should be an id of the collapsing div. So What I did is give your collapsing div and id and in the data-target for the button, I wrote the collapsing div id

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapseGuy"></button> 
<!--keep in mind that the collapsing div's id="myCollapseGuy" not "#myCollapseGuy"-->

Bootply link here

 <div class="navbar navbar-default">
    <div class="navbar-inner">
        <div class="container">
            <div class="navbar-header">
                <button type="button"
                        class="navbar-toggle"
                        data-toggle="collapse"
                        data-target="#myCollapseGuy">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="siteTitle" class="navbar-brand" href="/">Joseph Anthony King</a>
            </div>
            <div class="navbar-collapse collapse" id="myCollapseGuy">
            <ul class="nav navbar-nav pull-right">
                <li class="dropdown">
                    <a href="/">Home</a>
                </li>
                <li class="dropdown">
                    <a href="/Resume">Resume</a>
                </li>
                <li class="dropdown">
                    <a href="/Downloads">Downloads</a>
                </li>
                <li class="dropdown">
                    <a href="https://joe-king-sample-app.herokuapp.com/" target="_blank">
                        Sample App
                    </a>
                </li>
            </ul>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions