3

I am trying to fix a site written by someone else. Most things seem to work, except for the menus in responsive view. The "hamburger" button does appear, but it's not clickable. The CSS is kind of huge, and I don't quite know where to start.

JSFiddle

This is what a see in responsive view under that button:

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

Where should that data-target lead?

Also, please let me know if I need to add the contents of the JavaScript files to JSFiddle as well. They didn't seem relevant to me.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Dave
  • 628
  • 5
  • 13

2 Answers2

0

This seems to be working for me.
http://jsfiddle.net/9j15q8p7/1/

<body class="theme-invert" onload="prettyPrint()">
 <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            <a class="navbar-brand" href="/"><img src="/img/logo.png" width="245" height="29" /></a><br><br><br>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
     <li><a href="/">Home</a></li>
     <li><a href="/page2">Page 2</a></li>
     <li><a href="/page3">Page 3</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

<div style="max-width:1000px; margin:0 auto; padding-bottom:20px;">

<article class="markdown-body">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus 
                                        justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis, 
                                        ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet 
                                        vulputate. Nulla quis nibh ipsum, sed egestas justo. Morbi ut ante mattis orci convallis tempor. 
                                        Etiam a lacus a lacus pharetra porttitor quis accumsan odio. Sed vel euismod nisi. Etiam convallis 
                                        rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien. 
                                        Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi. 
                                        Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>

You have to put external JavaScript and CSS files in the menu to the left (External Resources).

serhanp
  • 5
  • 1
  • 4
  • I have to keep the current CSS though, because it's already heavily customized. That's why I pasted it in the CSS box of jsfiddle. – Dave May 14 '15 at 23:36
  • You could also just link the default bootstrap.css first and then yours. Although that would be too heavy to load. – serhanp May 14 '15 at 23:42
  • I tried that, but the formatting gets wiped when both are linked. – Dave May 14 '15 at 23:46
  • This is a little insane, but I can't reproduce your version of a working menu when I save your fiddle code locally as HTML + CSS. I included the two external references to Bootstrap js and css, and it's still not working. It's only working in the jsfiddle window for me. – Dave May 15 '15 at 01:44
  • Try it on your webpage then, I think there's just something messed up with jsfiddle. – serhanp May 15 '15 at 15:58
0

It turns out I just needed the Collapse js component of Bootstrap. Downloaded it at the Bootstrap Customizer site, and everything started working.

Dave
  • 628
  • 5
  • 13