Меню гамбургера не открывается при загрузке

Question

Я не могу открыть меню гамбургера при использовании начальной загрузки. Кто-нибудь, пожалуйста, скажите мне, в чем проблема с кодом?

Я вытащил код прямо с сайта начальной загрузки. Я смотрел на вопросы других людей относительно этой проблемы, но предложенные решения не помогли.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
  <a class="navbar-brand" href="index.html">
    <img src="logo.png" width="200" height="200" class="d-inline-block align-top" alt="">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home <span class="sr-only"> 
    (current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="portfolio.html">Portfolio </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.html">About </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact </a>
      </li>
    </ul>
  </div>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <a href="#"></a>
    <a href="#" class="fa fa-instagram"></a>
  </div>
</nav>

Пожалуйста, объясните мне это очень просто, так как я новичок в кодировании. Я хочу иметь возможность открывать меню гамбургера на мобильном устройстве.

Answer 1

Спасибо всем большое! Это действительно помогло.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>




<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home <span class="sr-only"> 
    (current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="portfolio.html">Portfolio </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.html">About </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact </a>
      </li>
    </ul>
  </div>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <a href="#"></a>    
    <h1>HEY HEY HEY!<br/><i class="fas fa-yin-yang fa-spin"></i></h1>
  </div>
</nav>

Answer 2

• data-target и id не были одинаковыми.
• Вам нужны jquery и bootstrap.js, чтобы раскрывающийся список работал.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
  <a class="navbar-brand" href="index.html">
    <img src="logo.png" width="50" height="50" class="d-inline-block align-top" alt="">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home <span class="sr-only"> 
    (current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="portfolio.html">Portfolio </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="about.html">About </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact </a>
      </li>
    </ul>
  </div>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <a href="#"></a>
    <a href="#" class="fa fa-instagram"></a>
  </div>
</nav>
<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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>