1

Why isn't my bootstrap navbar not collapsing? The toggle button shows up but when I click it, nothing happens. (Written in React so using className instead of class.) I even tried copying and pasting directly from the Bootstrap example and it still doesn't work. Am I forgetting to import something somewhere? I also tried copying and pasting from this example from this other question on stackoverflow, didn't work.

<nav className="navbar navbar-default navbar-fixed-top navbar-shrink">
    <div className="container">
        <div className="navbar-header page-scroll">
            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar=in-collapse" aria-expanded="false" aria-controls="navbar">
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
            </button>
            <a className="navbar-logo page-scroll" href="#about">
                <img src="icon.png" />Page
            </a>
        </div>

        <div className="collapse navbar-collapse" id="navbar-in-collapse">
            <ul className="nav navbar-nav navbar-right">
                <li className="hidden active">
                    <a href="#page-top"></a>
                </li>
                <li className="">
                    <a className="page-scroll" href="#portfolio">Portfolio</a>
                </li>
                <li className="">
                    <a className="page-scroll" href="#blog">Blog</a>
                </li>
                <li className="">
                    <a className="page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

In my html, it looks like this:

<!DOCTYPE HTML>

<html>

<head>
  <title>Kaisin Li</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="./index.css" rel="stylesheet" />
  <link rel="icon" href="./favicon.ico">
</head>

<body>
  <div id="main"></div>
  <script src="./bundle.js" defer></script>
</body>

</html>

Thanks!

Improve this question
2
  • with React you should not be using bootstrap.js because it effects the DOM directly, instead use react-bootstrap or my personal favorite one reactstrap Commented Oct 22, 2017 at 17:36
  • @MorrisS Ah I see, thank you! Commented Oct 23, 2017 at 3:30

4 Answers 4

Reset to default
2

In first, you need to append links to jQuery and bootrstrap.js to your page. In second, data-target="#navbar=in-collapse" should be replaced by data-target="#navbar-in-collapse". See the and run the snippet below.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-in-collapse" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-logo page-scroll" href="#about">
                <img src="icon.png" />Page
            </a>
        </div>

        <div class="collapse navbar-collapse" id="navbar-in-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden active">
                    <a href="#page-top"></a>
                </li>
                <li class="">
                    <a class="page-scroll" href="#portfolio">Portfolio</a>
                </li>
                <li className="">
                    <a class="page-scroll" href="#blog">Blog</a>
                </li>
                <li class="">
                    <a class="page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

If you use bundles for jQuery and Bootstrap scrips, make shure the scripts are bundled in correct order.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

try including bootstrap.min.js too

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0alpha.6/js/bootstrap.min.js" ></script>
Improve this answer

Comments

1

You need to load bootstrap js

some functionality in bootstrap depends on it such as navbar collapse

check the fourth point here

your code should look something like this

<!DOCTYPE HTML>

<html>

<head>
  <title>Kaisin Li</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="./index.css" rel="stylesheet" />
  <link rel="icon" href="./favicon.ico">
</head>

<body>
  <div id="main"></div>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="./bundle.js" defer></script>
</body>

</html>
Improve this answer

Comments

0

in you code the data-target="#navbar=in-collapse" has '=' and the id is id="navbar-in-collapse" which does not have '=' it is '-'.check for spelling mistake.

Improve this answer

1 Comment

Accepted answer said the same thing

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.