Error with dropdown menu (not displayed)

Navigation
0

I'm using the flatly bootstrap theme to create a web. Flatly Theme The fact is that I have put a navbar and until then everything is fine when putting a drop-down element does not unfold and when I put it in mobile mode the drop-down button is unfolded.

I enclose the code that I have. Assuming I have the css in a folder css i the javascript in a folder js. 

<!doctype html>
<html lang="es">
  	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>Formulari de contacte</title>
    	<!--link href="css/bootstrap.min.css" rel="stylesheet">
      <script src="js/bootstrap.min.js"></script>
      <script src="js/jquery.min.js"></script-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>


	</head>

	<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
          <a class="navbar-brand" href="#">Germans Climent</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item dropdown show">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="categories" aria-expanded="true">Categories <span class="caret"></span></a>
                      <div class="dropdown-menu" aria-labelledby="categories">
                        <a class="dropdown-item" href="#">Default</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Cerulean</a>
                        <a class="dropdown-item" href="#">Cosmo</a>
                      </div>
                    </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Productes especials</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="ofertes.html">Ofertes</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="noticies.html">Noticies</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Ajuda</a>
              </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search">
              <button class="btn btn-secondary my-2 my-sm-0" type="submit">Cercar</button>
            </form>
            <ul class="navbar-nav navbar-right">
              <li class="nav-item">
                <a class="nav-link" href="inisessio.html">Iniciar sessió / Registrar-se</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Comandes</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Cistella</a>
              </li>
            </ul>
          </div>
        </nav>
    </header>
    </body>
    </html>

I have downloaded and inserted jquery and bootstrap in the folders mentioned above.

I hope your help. Greetings.

    
asked by jose climent penades 02.05.2018 в 09:50
source

2 answers

1

Regarding the error that Bootstrap gives you, I do not have problems with the following links:

CSS 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

JS 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

On the other hand, the navbar does not work for you because data-target points to an id that does not exist. You do not have any #navbar01 .

Therefore you must change line 20 with a valid id: 

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#idDeMiNavbar" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">

And in turn give an id to the div: 

<div class="collapse navbar-collapse" id="idDeMiNavbar">
    
answered by 02.05.2018 в 10:34
0

I answer myself just because JS and HTML never stop surprising me xD

The fact is that as you can see in my cargo code first bootstrap and then Jquery. You see that this gives problems because Bootstrap can not read the Jquery data. Changing the order of the scripts and putting the jquery first is solved.

Link to the reference where I saw the solution.

  

link

Greetings.

    
answered by 02.05.2018 в 10:28
Jquery library does not work correctly Additional information: Object reference not set to an instance of an object