Twitter Bootstrap Question posted in

Bootstrap 3: Navbar doesnt collapse into hamburguer menu when screen is shrinked – Twitter bootstrap

I’m using Bootstrap 3 and for some reason my navbar menu doesn’t collapse into the “hamburger” menu when I shrink the screen.

I have checked that I have included JQuery and both the Bootstrap Javascript and CSS files. The console isn’t throwing any errors either.

This is my code:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>My Site</title>

    <script src="https://code.jquery.com/jquery-2.2.2.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href="css/thumbnail-gallery.css" rel="stylesheet">

</head>

<body style="background-color:#F0F0F0;">


    <nav class="navbar" role="navigation">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" 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="index.html" style="font-family:YesterYear; font-size:2.9em;">MY SITE</a>
            </div>

            <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1" style="font-size:1.5em;" >
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#" target="blank"><i class="fa fa-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-envelope"></i></a>
                    </li>
                    <li>
                        <a href="#" target="blank"><i class="fa fa-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#" target="blank"><i class="fa fa-instagram"></i></a>
                    </li>
                </ul>
            </div>

        </div>

    </nav>

Any idea what I’m missing or doing wrong?

Tags:

2

Answers


  1. 0

    https://jsfiddle.net/13p6um3w/

    I found some typos in your code (unclosed quotes, tags)

    <nav class="navbar" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 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="index.html" style="font-size:2.9em;">MY SITE</a>
        </div>

        <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1" style="font-size:1.5em; color: black;" >
            <ul class="nav navbar-nav">
                <li>
                    <a href="#" target="blank">l1<i class="fa fa-twitter"></i></a>
                </li>
                <li>
                    <a href="#">l2</a>
                </li>
                <li>
                    <a href="#" target="blank">l3<i class="fa fa-facebook"></i></a>
                </li>
                <li>
                    <a href="#" target="blank">l4<i class="fa fa-instagram"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>
    Login or Signup to reply.
  2. 0

    You forgot to specify a style to your navbar. change <nav class="navbar" role="navigation"> to <nav class="navbar navbar-default" role="navigation">. It will create the hamburger menu for you. Then, you have to style your nav bar.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search