DropDown does not work with responsiveness (Bootstrap)

Navigation
0

Good afternoon, in the code below that I did, when I trigger the dropdown with the responsive page, it goes back and forth, it does not remain "open / lowered", I saw that it could be the import order, last but not solved, what else can it be? 

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>teste</title>


    <link rel="icon" href="img/favicon.ico" type="image/x-icon"/>
    <!-- Fontes -->
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
    <!-- Footer -->
     <link href="css/footer.css" rel="stylesheet">
    <!-- CSS notícias -->
    <link href="css/noticias.css" rel="stylesheet">
    <!-- Flip Card -->
    <link href="css/flipcard.css" rel="stylesheet" >
    <!-- Slider de depoimentos -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="css/depoimento.css" rel="stylesheet">
    <!-- Galeria bootstrap -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link href="css/galeria.css" rel="stylesheet" >
    <script src="js/galeria.js" type="text/javascript"></script>
    <!-- Ancora com JS -->
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
    <script src="js/ancora.js" type="text/javascript"></script>
    <!-- CSS Complementar -->
    <link href="css/agency.min.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <!-- Header -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        <button class="navbar-toggler bg-dark navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fa fa-align-justify"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="dropdown nav-item">
              <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
              <ul class="dropdown-menu">
                <li class="nav-item"> <a class="scroll nav-link" href="#depoimentos"> Depoimentos </a></li>
                <li class="nav-item"> <a class="nav-link" href="#" target="blank">2ª via do boleto </a></li>
                <li class="nav-item"> <a class="nav-link" href="#" target="_blank">Atendimento Online</a></li>
              </ul>
            </li>
            <li class="dropdown nav-item">
              <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Downloads</a>
              <ul class="dropdown-menu">
                <li class="nav-item"> <a class="nav-link" href="https://www.teamviewer.com/pt-br/download/windows/" target="_blank"> Team Viewer </a></li>
                <li class="nav-item"> <a class="nav-link" href="https://anydesk.pt/plataformas/windows" target="blank">AnyDesk</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

.... resto do código
    
asked by anonymous 19.12.2018 / 17:16

1 answer

1

Boy this order of indexing and how com does really is pretty confusing. One tip I give you is the .CSS in the <head> and everything that is .JS you put there in the end as the last thing before </body> This is not rule, but it's a good practice! >

Read this question to help a lot: Where should I put JavaScript code in an HTML document?

See it working, left in the answer the whole code of the document, to make it easier for you to understand the organization etc ... 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="icon" href="img/favicon.ico" type="image/x-icon"/>

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <!-- Fontes -->
  <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
  <!-- Footer -->
   <link href="css/footer.css" rel="stylesheet">
  <!-- CSS notícias -->
  <link href="css/noticias.css" rel="stylesheet">
  <!-- Flip Card -->
  <link href="css/flipcard.css" rel="stylesheet" >
  <!-- Slider de depoimentos -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="css/depoimento.css" rel="stylesheet">
  <!-- Galeria bootstrap -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
  
  <link href="css/galeria.css" rel="stylesheet" >
  <script src="js/galeria.js" type="text/javascript"></script>
  
  <!-- CSS Complementar -->
  <link href="css/agency.min.css" rel="stylesheet">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">


<style>

  body {
    background-color: blue;
  }
</style>
</head>
<body>

          <!-- Header -->
          <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
            <div class="container">
              <button class="navbar-toggler bg-dark navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
              Menu
              <i class="fa fa-align-justify"></i>
              </button>
              <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav text-uppercase ml-auto">
                  <li class="dropdown nav-item">
                    <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
                    <ul class="dropdown-menu">
                      <li class="nav-item"> <a class="scroll nav-link" href="#depoimentos"> Depoimentos </a></li>
                      <li class="nav-item"> <a class="nav-link" href="#" target="blank">2ª via do boleto </a></li>
                      <li class="nav-item"> <a class="nav-link" href="#" target="_blank">Atendimento Online</a></li>
                    </ul>
                  </li>
                  <li class="dropdown nav-item">
                    <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Downloads</a>
                    <ul class="dropdown-menu">
                      <li class="nav-item"> <a class="nav-link" href="https://www.teamviewer.com/pt-br/download/windows/" target="_blank"> Team Viewer </a></li>
                      <li class="nav-item"> <a class="nav-link" href="https://anydesk.pt/plataformas/windows" target="blank">AnyDesk</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </nav>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

    <!-- Galeria bootstrap -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
    <!-- Ancora com JS -->
    <script src="js/ancora.js" type="text/javascript"></script>

</body>
</html>
    
19.12.2018 / 18:01
How do I limit the extensions that can be saved? (PHP) Validation using JS