bootstrap mobile navbar toggle not working

Question

my nav bar was working fine, but now i am trying to optimize it for mobile so if the screen is wide enough the user would have to click a button
here is my code:

<nav class="navbar navbar-default navbar-fixed-top shadow">
    <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 href="http://red-sec.net" class="navbar-brand">Red-Sec.net</a>
      </div>
      <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="menuitem"><a href="http://red-sec.net">Home</a></li>
        <li class="menuitem"><a href="http://announcements.red-sec.net">Announcements</a></li>
        <li class="menuitem"><a href="http://forum.red-sec.net">Forum</a></li>
        <li class="menuitem"><a href="http://blog.red-sec.net">Blog</a></li>
        <li class="menuitem"><a href="http://news.red-sec.net">News</a></li>
        <li class="menuitem"><a href="http://donate.red-sec.net">Donate</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="menuitem"><a href="http://red-sec.net/signup.php">Sign Up</a></li>
        <li class="menuitem"><a href="http://red-sec.net/Login.php">Log In</a></li>
      </ul>
    </div>
  </nav>

i just checked it on my phone and the navbar shows normally as if there is not optimization but if i make chrome windows smaller it shows me the button but when i click it nothing happens (yes i included jquery and the bootstrap javascript)

you can see it here: http://red-sec.net/ – red security Jan 20 '17 at 01:15 — red security, Jan 20 '17 at 01:15

Obsidian Age · Accepted Answer · 2017-01-20T01:25:35.343

0

This is probably due to the fact that you missed the equals sign in data-target".navbar-collapse", rather than data-target=".navbar-collapse".

For what it's worth, you also haven't closed your container div.

Try this updated fiddle's code instead :)

edited Jan 20 '17 at 01:25

answered Jan 20 '17 at 01:15

Obsidian Age

41,205
10
48
71

omg im so sorry i guess i needed a second pair of eyes lol – red security Jan 20 '17 at 01:18
thank you, i will accept your answer in 7 minutes – red security Jan 20 '17 at 01:19
it still is not working on my phone though... – red security Jan 20 '17 at 01:20
Have you included the collapse javascript plugin? http://getbootstrap.com/components/#callout-navbar-js Also, I'm pretty sure you need an id as data-target and not a class – Sergio Alen Jan 20 '17 at 01:30
fixed it, i had forgotten the meta tag i should be ashamed of myself right now – red security Jan 20 '17 at 01:42
Ahh! -- Glad you got it sorted. I was scratching my head for quite a while there wondering what could be causing it if simply correcting the data-target didn't fix the problem :) – Obsidian Age Jan 20 '17 at 01:54

bootstrap mobile navbar toggle not working

1 Answers1