Collapse in Boostrap 4 is not opening

Asked

Viewed 34 times

1

body {
      font: 400 20px Times New Roman, Arial, Arial Nova Light, sans-serif;
      line-height: 1.8;
      color: #818181;
}

h4 {
      font-size: 19px;
      line-height: 1.375em;
      color: #303030;
      font-weight: 400;
      margin-bottom: 30px;
}  
.jumbotron {
      background-color: #4f0000;
      color: #fff;
      padding: 100px 25px;
      font-family: Times New Roman, sans-serif;
}
.container-fluid{
  padding-top: 60px;
}
.bg-grey {
      background-color: #f4f4f4;
}
.logo-image{
  width: 50px;
  height: auto;
}
.logo-brand{
    margin-bottom: 0;
    grid-auto-rows: auto;
    width: 50px;
    color: #164b64;
}
.logo-small {
      color:#164b64;
      font-size: 50px;
}
.logo {
      color: #164b64;
      font-size: 200px;
}
.navbar {
      margin-bottom: 0;
      background-color: #004f4f;/* 3d3d6c*/
      z-index: 9999;
      border: 0;
      font-size: 12px !important;
      /*line-height: 1.42857143 !important;*/
      letter-spacing: 3px;
      border-radius: 0;
      font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
      color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
      color: #fff !important;
      background-color: #164b64 !important;
}
.navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
}
@keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  } 
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

@media screen and (max-width: 2000px){
  .slidean{font-size: 190px}
  .slideanim{font-size: 190px}
}

@media screen and (max-width: 1260px){
  .slidean{font-size: 130px;}
  .slideanim{font-size: 120px;}
  .logo-smal{font-size: 60px}
}
@media screen and (max-width: 790px) {
  .slidean{ font-size: 100px }
  .slideanim{ font-size: 100px }
  .col-sm-4 {
      font-size: 18px;
      text-align: center;
      margin: 10px 0;
  }
  .col-sm-6 {
      font-size: 18px;
      text-align: center;
      margin: 10px 0;
  }
  .btn-lg {
        width: 100%;
        margin-bottom: 35px;
  }
}
@media screen and (max-width: 480px) {
  .slidean{display: none;}
  .logo {font-size: 150px;}  
}
<head>
  <title>Lorem Ipsum</title>
  <meta charset="utf-8">
  <!-- Definindo informações do site para crawlers--->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!--Icons-->
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
  <!--Boostrap 4-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!--Estilo personalizado-->
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <script src="js/scripty.js" type="text/javascript"></script>
</head>

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg fixed-top">
      <a class="navbar-brand js-scroll-trigger" href="#myPage">
        <img class="logo-brand" src="./images/logo.png"> Lorem Ipsum
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
        <span class=" fas fa-ellipsis-v" style="color:#282828"></span>
      </button>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#about">ABOUT</a></li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#formation">FORMATION</a></li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#portifolio">PORTIFOLIO</a></li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#courses">COURSES</a></li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#acquaintance">ACQUAINTANCE</a></li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#citations">CITATIONS</a></li>
          <li class="nav-item mx-0 mx-lg-1">
            <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#contact">CONTACT</a></li>
        </ul>
      </div>
    </nav>
  </div>
</body>
</html>

html5 css3 bootstrap-4

1 answer

2


Your problem is simple, you forgot to add jQuery on <head> He must come before the popper.js and before the bootstrap.js

inserir a descrição da imagem aqui

Here is a Base Template indicated by the official Bootstrap documentation itself. Note that besides jQuery, they also indicate that all .js should come at the end of the document, and the order would be jquery/popper/bootstrap https://getbootstrap.com/docs/4.3/getting-started/introduction/? #Starter-template

<!DOCTYPE html>
<html lang="en">
<head>



  <title>Lorem Ipsum</title>
  <meta charset="utf-8">
  <!-- Definindo informações do site para crawlers--->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!--Icons-->
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
  <!--Boostrap 4-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!--Estilo personalizado-->



<style>
  body {
      font: 400 20px Times New Roman, Arial, Arial Nova Light, sans-serif;
      line-height: 1.8;
      color: #818181;
}

h4 {
      font-size: 19px;
      line-height: 1.375em;
      color: #303030;
      font-weight: 400;
      margin-bottom: 30px;
}  
.jumbotron {
      background-color: #4f0000;
      color: #fff;
      padding: 100px 25px;
      font-family: Times New Roman, sans-serif;
}
.container-fluid{
  padding-top: 60px;
}
.bg-grey {
      background-color: #f4f4f4;
}
.logo-image{
  width: 50px;
  height: auto;
}
.logo-brand{
    margin-bottom: 0;
    grid-auto-rows: auto;
    width: 50px;
    color: #164b64;
}
.logo-small {
      color:#164b64;
      font-size: 50px;
}
.logo {
      color: #164b64;
      font-size: 200px;
}
.navbar {
      margin-bottom: 0;
      background-color: #004f4f;/* 3d3d6c*/
      z-index: 9999;
      border: 0;
      font-size: 12px !important;
      /*line-height: 1.42857143 !important;*/
      letter-spacing: 3px;
      border-radius: 0;
      font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
      color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
      color: #fff !important;
      background-color: #164b64 !important;
}
.navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
}
@keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  } 
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

@media screen and (max-width: 2000px){
  .slidean{font-size: 190px}
  .slideanim{font-size: 190px}
}

@media screen and (max-width: 1260px){
  .slidean{font-size: 130px;}
  .slideanim{font-size: 120px;}
  .logo-smal{font-size: 60px}
}
@media screen and (max-width: 790px) {
  .slidean{ font-size: 100px }
  .slideanim{ font-size: 100px }
  .col-sm-4 {
      font-size: 18px;
      text-align: center;
      margin: 10px 0;
  }
  .col-sm-6 {
      font-size: 18px;
      text-align: center;
      margin: 10px 0;
  }
  .btn-lg {
        width: 100%;
        margin-bottom: 35px;
  }
}
@media screen and (max-width: 480px) {
  .slidean{display: none;}
  .logo {font-size: 150px;}  
}


</style>
</head>
<body>
  
  <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
    <div class="container-fluid">
      <nav class="navbar navbar-expand-lg fixed-top">
        <a class="navbar-brand js-scroll-trigger" href="#myPage">
          <img class="logo-brand" src="./images/logo.png"> Lorem Ipsum
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
          <span class=" fas fa-ellipsis-v" style="color:#282828"></span>
        </button>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#about">ABOUT</a></li>
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#formation">FORMATION</a></li>
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#portifolio">PORTIFOLIO</a></li>
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#courses">COURSES</a></li>
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#acquaintance">ACQUAINTANCE</a></li>
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#citations">CITATIONS</a></li>
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 js-scroll-trigger" href="#contact">CONTACT</a></li>
          </ul>
        </div>
      </nav>
    </div>
  
  <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="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>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body> -->
</html>

Browser other questions tagged html5 css3 bootstrap-4

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