Bootstrap menu does not work Responsive

Asked

Viewed 2,420 times

0

Menu with Bootstrap does not work responsibly.

<!DOCTYPE html>
<html>
    <head>
        <title>Nome da Loja</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <meta name="viewport" content="width=device-width">
        <script src="js/bootstrap.js"></script>
        <script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
    </head>

    <body>
       <header>
           <nav class="navbar navbar-inverse">
              <div class="navbar-header">
                  <a href="#" class="navbar-brand">Store</a>
                   <button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">Menu</button>
              </div>

               <div class="collapse navbar-collapse">
                   <ul class="nav navbar-nav">
                       <li><a href="#">Novidades</a></li>
                       <li><a href="#">Mais vendidos</a></li>
                   </ul>
               </div>

           </nav>
       </header>
html5 twitter-bootstrap

2 answers

2

Your Bootstrap.js file is being loaded first than the jquery-2.1.3.min. js file, so you are not opening the menu.

  • If a js file depends on another, it always needs is below, and always prudent put the jQuery files first, because it does not depend on anyone, and always the plugin that depend on it.

  • The correct problem is in the js declaration of the page, your bootstrap.js is coming first, but it depends on jquery-2.1.3.min. js that is being declared later, because this by clicking on the burger menu is not opening.

0

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

  • Thank you, Leonardo. But I think there’s something very wrong. Continues with the same problem, but when I click it is marked as working but does not run the dropdown.

  • No friend you forgot the navbar-Fixed-top,

  • Here it worked, you are loading the css files ?

Browser other questions tagged html5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.