5

The toggle button is not working to reveal the collapsed elements and I do not know why. When the window is resized the toggle button is displayed but upon pressing, nothing happens. This is my first time using Bootstrap so I may have made some very obvious and ridiculous mistakes. Any help is appreciated.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
  <div class="page">

    <div class="nav navbar-default">
      <div class="container"></div>

      <li>
        <a class="logo" href="#1"></a>
      </li>
      <li>
        <a class="cart" href="#7"></a>
      </li>

      <button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse navHeaderCollapse">

        <ul>

          <li class="products"><a href="#2">Products</a>
          </li>
          <li class="store"><a href="#3">Store</a>
          </li>
          <li class="about"><a href="#4">About Us</a>
          </li>
          <li class="discover"><a href="#5">Discover</a>
          </li>
          <li class="support"><a href="#6">Support</a>
          </li>

        </ul>

      </div>

    </div>
  </div>
</div>

<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"></script>

Improve this question
3
  • You can create a snippet using the <> button in the editor to provide a minimal reproducible example. Please click TIDY if you do create a snippet Commented Nov 6, 2016 at 10:50
  • 2
    You have invalid HTML, you can't have LI elements without a list, Commented Nov 6, 2016 at 10:52
  • Ok fixing it still does not work. Commented Nov 6, 2016 at 10:58

5 Answers 5

Reset to default
4

You have at least a few problems: See the docs for the Navbar.

data-toggle="dropdown" should be data-toggle="collapse"

data-target="navHeaderCollapse" should be data-target=".navHeaderCollapse"

Fixing these two issues should allow the menu to open and close. You may want to utilize the default structure to avoid (or at least be aware of) additional issues live enclosing your toggle button inside the navbar-header class as well as the .nav & .navbar-nav classes on your menu list items. Also your container isn't doing anything currently, it should surround the navbar-header / list items.

Working Example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="boostrap-iso">
  <div class="page">

    <div class="nav navbar-default">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a href="#" class="navbar-brand">LOGO</a>
          <a href="#" class="navbar-brand"><span class="glyphicon glyphicon-shopping-cart"></span></a>
        </div>

        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li class="products"><a href="#2">Products</a>
            </li>
            <li class="store"><a href="#3">Store</a>
            </li>
            <li class="about"><a href="#4">About Us</a>
            </li>
            <li class="discover"><a href="#5">Discover</a>
            </li>
            <li class="support"><a href="#6">Support</a>
            </li>
          </ul>
        </div>

      </div>
    </div>

  </div>
</div>


<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"></script>

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

Comments

1

The reason that your navbar toggle button isn't working is that you've missed 3 things.

  1. You need to change data-toggle="dropdown" to data-toggle="collapse".

  2. You need to change data-target="navHeaderCollapse" to data-target="#navHeaderCollapse".

  3. You need to add id="navHeaderCollapse" to the div with the collapse css class.

Once you have all these elements the toggle will work. There are some other things missing like the navbar-header div, your container being closed in the wrong spot and the first <li> elements not being within an <ul> tag.

Here is a jsfiddle with your code working: https://jsfiddle.net/4syh8nth/9/

Improve this answer

Comments

0

Try using the # symbol in data-target attribute to refer on an element whose using this ID.

<button class="navbar-toggle" data-toggle="dropdown" data-target="#navHeaderCollapse">

And add an ID attribute to your .navbar-collapse element

<div id="navHeaderCollapse" class="collapse navbar-collapse">

Refer to the docs

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap

Collapse plugin

Improve this answer

2 Comments

Have you the bootstrap javascript loaded ?
Yes, I have. Thanks for the help I am still finding a solution.
0

You may make this as like i did by bootstrap. some classes in your code i didn't recognize its bootstrap included or not. thanks

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">

<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="products"><a href="#2">Products</a></li>
<li class="store"><a href="#3">Store</a></li>
<li class="about"><a href="#4">About Us</a></li>
<li class="discover"><a href="#5">Discover</a></li>
<li class="support"><a href="#6">Support</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
Improve this answer

1 Comment

Thank you for the help. Unfortunately, this solution did not work either.
0

I had faced the same issue.

I used data-toggle cdn in the head section and it worked in my case. For more info check the link.

Use https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css in head part of HTML.

Check whether you have used all related CDNs.

Improve this answer

2 Comments

You should write out the key parts of the code that answer the question rather than simply providing links. Links can expire. Please read the documentation on how to answer a question.
Thank you for the suggestion. I have corrected it. This was my first answer. As I am new to this site, I was not aware of formats. I will write clear answers in future.

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.