CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcdn
Devon Deason
Devon Deason

Reputation: 73

Bootstrap via CDN

I'm delving into Bootstrap for the first time this morning and having issues with my collapsible menu. When the browser's size is below 768px I can see the hamburger at the top right, but it lacks any functionality. I have a feeling it is due to my use of a CDN to reference Bootstrap.

<!DOCTYPE html>
<html>

<head lang='en'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <title>Text for title</title>
</head>

<body>
    <div class='navbar navbar-default'>
        <div class="container-fluid">
            <div class='navbar-header'>
                <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' aria-expanded="false">
                        <span class='sr-only'>Toggle Navigation</span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                </button>
                <h1 class='navbar-brand'><a  href='#'>Name goes here</a></h1>
            </div>

            <div class='collapse navbar-collapse'>
                <ul class= 'nav navbar-nav'>
                    <li role='navigation' ><a href='#'>Home</a></li>
                    <li role='navigation'><a href='#'>About</a></li>
                    <li role='navigation'><a href='#'>Portfolio</a></li>
                    <li role='navigation'><a href='#'>Resources</a></li>
                    <li role='navigation'><a href='#'>Contact</a></li>
                </ul>
            </div>
        </div>
    </div>


   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>

</body>
</html>

Upvotes: 0

Views: 319

Answers (1)

J. Titus
J. Titus

Reputation: 9690

You're missing data-target on the button, which links to an identifier on the collapsible div. Try this:

<div class='navbar navbar-default'>
    <div class="container-fluid">
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target="#mynavbar" aria-expanded="false">
                    <span class='sr-only'>Toggle Navigation</span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
            </button>
            <h1 class='navbar-brand'><a  href='#'>Name goes here</a></h1>
        </div>

        <div id="mynavbar" class='collapse navbar-collapse'>
            <ul class= 'nav navbar-nav'>
                <li role='navigation' ><a href='#'>Home</a></li>
                <li role='navigation'><a href='#'>About</a></li>
                <li role='navigation'><a href='#'>Portfolio</a></li>
                <li role='navigation'><a href='#'>Resources</a></li>
                <li role='navigation'><a href='#'>Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Upvotes: 4

Related Questions