CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
faraz
faraz

Reputation: 2733

Bootstrap toggle button not working

Please take look at my portfolio site​

  1. the toggle hamburger button for navigation for smaller screen sizes doesn't work i.e nothing happens and the links don't show up when I click on it.

  2. the images and boxes for the portfolio apps showcased becomes too small for smaller screen sizes even though I used col-sm-12, dunno why this is happening?

  3. I have noticed that there is a horizontal bar too for small screen sizes, which shouldn't be there. It seems that it's the portfolio heading and the contact me heading causing this. could you tell me how to fix this?

<!--Navbar Begins    -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- navbar header begins   -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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 class="navbar-brand" href="#">Faraz Ahmed</a>

    </div>
    <!-- navbar header ends -->

    <!-- div collapse begins -->
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#aboutme">About</a>
        </li>
        <li><a href="#portfolioz">Portfolio</a>
        </li>
        <li><a href="#contactme">Contact</a>
        </li>
      </ul>
    </div>
    <!-- div collapse ends -->
  </div>
  <!-- container-fluid ends -->
</nav>
<!--Navbar ends    -->
<div id="aboutme" class="about container-fluid">
  <div class="row">
    <div class="col-lg-12 col-md-8 col-sm-6">
      <img class="img-responsive img-circle" src="http://res.cloudinary.com/whizzy/image/upload/v1454699647/faraz_qwdqrx.jpg">
      <h1>Faraz Ahmed</h1>
      <hr><i class="fa fa-star"></i>
      <hr>
      <p>I am a self taught web developer who has learnt html,css, Javascript,Jquery and bootstrap too. I keep building websites and other apps to practice what I have learnt. The psd to html site below and the sites with carousel and overlay are all responsive.
        Go ahead and take a look at them in your mobile and see how they adjust to your screen size.</p>
    </div>
  </div>
</div>

<div id="portfolioz" class="portfolio container-fluid">
  <div class="row">
    <div class="col-md-12 col-md-10 col-sm-12">
      <h1>Portfolio</h1>
      <hr><i class="fa fa-star"></i>
      <hr>

    </div>


    <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
      <a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwXYbM">
        <img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/v1454696279/random-quotes_wkbzgo.jpg">
      </a>
      <p>This is the random quotes generator</p>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
      <a class="thumbnail" href="http://codepen.io/silentarrowz/full/PZzgvR">
        <img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454696085/pomodoro_rnl9n4.jpg">
      </a>
      <p>This is the pomodoro timer</p>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
      <a class="thumbnail" href="http://codepen.io/silentarrowz/full/XXjEYE">
        <img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454695469/javascript-calculator_zksddu.jpg">
      </a>
      <p>This is the javascript calculator</p>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
      <a class="thumbnail" href="http://codepen.io/silentarrowz/full/GZWNOX">
        <img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/carousel-experiment_sd0wev.jpg">
      </a>
      <p>Carousel Experiment with in psd to html site</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
      <a class="thumbnail" href="http://codepen.io/silentarrowz/full/eJqPjy">
        <img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/portfolio-site_gmac46.jpg">
      </a>
      <p>My Portfolio site showcasing projects & experiments</p>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
      <a class="thumbnail" href="http://codepen.io/silentarrowz/full/ZQRvKL">
        <img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/overlay-experiment_eocbsr.jpg">
      </a>
      <p>Experimenting with overlay and pop-up boxes</p>
    </div>


    <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
      <a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwoGMB">
        <img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367863/weatherapp_zvihox.jpg">
      </a>
      <p>My Weather app</p>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
      <a class="thumbnail" href="http://codepen.io/silentarrowz/full/BKGXNG">
        <img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367830/wikiview_slscex.jpg">
      </a>
      <p>Wikipedia Viewer</p>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme">
      <a class="thumbnail" href="http://codepen.io/silentarrowz/full/qZLZEy">
        <img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1467313840/twitch-tv_vhqntl.jpg">
      </a>
      <p>Twitch Tv Streamer</p>
    </div>
  </div>

</div>

<div id="contactme" class="contact container-fluid">
  <div class="row">
    <div class="col-md-12">
      <h2> Connect with me:</h2>

      <a href="http://www.twitter.com/faraz">
        <button id="btn5" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i>Twitter</button>
      </a>
      <a href="http://www.github.com/silentarrowz">
        <button id="btn6" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i>Github</button>
      </a>
      <a href="https://www.linkedin.com/profile/view?id=AAMAAAOtZrQByiBQ7mnkxFa8BDodzVKYzsI7T3Y&trk=hp-identity-name">
        <button id="btn7" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i>Linkedin</button>
      </a>
      <a href="http://www.freecodecamp.com/silentarrowz">
        <button id="btn8" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i>freeCodeCamp</button>
      </a>
    </div>
  </div>
</div>

<div class="footer">
  <p>Copyright Reserved By Faraz Ahmed @ 2016</p>
</div>

Upvotes: 1

Views: 4991

Answers (1)

dippas
dippas

Reputation: 60553

Problem

you are missing bootstrap.js

Explanation

Boostrap navbar requires JavaScript plugin to work, and you are missing it. You can see in Boostrap Docs

Requires JavaScript plugin

If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

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

Working Snippet

body{
  font-size:14px;
}
.container-fluid{
  max-width:1200px;
}
.hoverme{
  height:400px;
  margin-bottom:20px;
  overflow :hidden;
  max-width:340px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--Navbar Begins    -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- navbar header begins   -->
  <div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" 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 class="navbar-brand" href="#">Faraz Ahmed</a>
        
 </div>  <!-- navbar header ends -->
      
 <!-- div collapse begins -->
      <div class="collapse navbar-collapse" id="navbar-collapse">
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#aboutme">About</a></li>
   <li><a href="#portfolioz">Portfolio</a></li>
   <li><a href="#contactme">Contact</a></li>
        </ul>      
      </div><!-- div collapse ends -->     
  </div><!-- container-fluid ends -->
  </nav>
  <!--Navbar ends    -->
  <div id="aboutme" class="about container-fluid">
  <div class="row">
    <div class="col-lg-12 col-md-8 col-sm-6">
   <img class="img-responsive img-circle" src="http://res.cloudinary.com/whizzy/image/upload/v1454699647/faraz_qwdqrx.jpg">
    <h1>Faraz Ahmed</h1>
      <hr><i class="fa fa-star"></i><hr>
    <p>I am a self taught web developer who has learnt html,css, Javascript,Jquery and bootstrap too. I keep building websites and other apps to practice what I have learnt. The psd to html site below and the sites with carousel and overlay are all responsive. Go ahead and take a look at them in your mobile and see how they adjust to your screen size.</p>
    </div>
    </div>
  </div>
  
  <div id="portfolioz" class="portfolio container-fluid">
    <div class="row">
      <div class="col-md-12 col-md-10 col-sm-12">
        <h1>Portfolio</h1>
    <hr><i class="fa fa-star"></i><hr>
      
    </div>
    
    
      <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwXYbM"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/v1454696279/random-quotes_wkbzgo.jpg"></a>
          <p> This is the random quotes generator</p></div>
      
      <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/PZzgvR"><img class="img-responsive"  src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454696085/pomodoro_rnl9n4.jpg"></a>
          <p> This is the pomodoro timer</p></div>
      
 <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"> <a class="thumbnail" href="http://codepen.io/silentarrowz/full/XXjEYE"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1454695469/javascript-calculator_zksddu.jpg"></a>
          <p> This is the javascript calculator</p></div>
 
 <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail"  href="http://codepen.io/silentarrowz/full/GZWNOX"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/carousel-experiment_sd0wev.jpg"></a>
          <p>Carousel Experiment with in psd to html site</p></div>
   <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail"  href="http://codepen.io/silentarrowz/full/eJqPjy"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/portfolio-site_gmac46.jpg"></a>
          <p>My Portfolio site showcasing projects & experiments</p></div>
  
    <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/ZQRvKL"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1459189426/overlay-experiment_eocbsr.jpg"></a>
          <p>Experimenting with overlay and pop-up boxes</p></div>
  
        
       <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/YwoGMB"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367863/weatherapp_zvihox.jpg"></a>
          <p>My Weather app </p></div>
    
      <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/BKGXNG"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1462367830/wikiview_slscex.jpg"></a>
          <p>Wikipedia Viewer</p></div>
  
      <div class="col-lg-4 col-md-4 col-sm-6 thumb hoverme"><a class="thumbnail" href="http://codepen.io/silentarrowz/full/qZLZEy"><img class="img-responsive" src="http://res.cloudinary.com/whizzy/image/upload/c_scale,h_300,w_400/v1467313840/twitch-tv_vhqntl.jpg"></a>
          <p>Twitch Tv Streamer</p></div>
  </div>      
      
  </div>
  
  <div id="contactme" class="contact container-fluid">
    <div class="row">
      <div class="col-md-12">
  <h2> Connect with me:</h2>
      
      <a href="http://www.twitter.com/faraz">
        <button id="btn5" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i>Twitter</button>
      </a>
      <a href="http://www.github.com/silentarrowz">
        <button id="btn6" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i>Github</button>
      </a>
      <a href="https://www.linkedin.com/profile/view?id=AAMAAAOtZrQByiBQ7mnkxFa8BDodzVKYzsI7T3Y&trk=hp-identity-name">
        <button id="btn7" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i>Linkedin</button>
      </a>
      <a href="http://www.freecodecamp.com/silentarrowz">
        <button id="btn8" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i>freeCodeCamp</button>
      </a>
      </div>
  </div>
  </div>
  
  <div class="footer">
    <p>Copyright Reserved By Faraz Ahmed @ 2016</p>
  </div

Upvotes: 2

Related Questions