Почему значок Bootstrap исчезает при сворачивании навигации?

Question

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

Сайт проходит валидатор w3 для html и css. Я просмотрел примеры и попробовал другой код для кнопки, но безрезультатно.

html body {
  background-color: #494848;
  color: #ffffff;
}

header {
  margin: 10px 0 30 0;
}

nav {
  margin-bottom: 40px;
}

h1 {
  font-family: sans-serif;
  color: #FFFF00;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

table {
  margin: 0 auto 10px;
  auto;
  border: 2px solid #ffffff;
  border-collapse: collapse;
  width: 80%;
}

th,
td {
  border: 1px solid #ffffff;
  padding: 5px;
  text-align: center;
}

th {
  background-color: lightgray;
  color: #6D2E0D;
}

ul {
  list-style: none;
}

.fsc {
  color: #FFFF00;
  font-family: cursive;
}

.header_p {
  text-align: center;
  text-shadow: 5px 5px 10px #ffffff;
  color: #FFFF00;
}

.drop {
  text-align: center;
  margin-top: 1%;
}

.name {
  font-family: cursive;
}


}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  
  height: 60px;
  line-height: 60px;
  /* Vertically center the text there */
  
  background-color: #f5f5f5;
}
#div_table {
  margin-top: 20px;
  ;
}
#a_examples {
  color: #FFFFFF;
  text-align: center;
}
#p_examples {
  text-align: center;
  color: #FFFF00;
}
#div_music {
  color: #ffffff;
  margin: 0 8% 10px 8%;
}
#Joe {
  /* image of joe */
  
  width: auto;
  height: auto;
  padding: 0px;
  margin-right: 2%;
  margin-top: 2px;
  margin-bottom: 0;
  float: none;
  border: 2px solid #ffffff;
}
#twitter {
  float: left;
  clear: left;
}
#connect_ul {
  margin-top: 30px;
}
#footer_p {
  color: #FFFF00;
  padding-top: 2px;
  padding-left: 4px;
  padding-right: 2px;
  text-align: center;
  text-shadow: 5px 5px 10px #ffffff;
  margin: 0 auto;
}
#page-content {
  flex: 1 0 auto;
}
#sticky-footer {
  flex-shrink: none;
  margin-top: 10%;
}

/*  built into bootstrap:
    
    Extra small (xs) devices (portrait phones, less than 576px)
    No media query since this is the default in Bootstrap
    
    Small (sm) devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }
    
    Medium (md) devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }
    
    Large (lg) devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }
    
    Extra (xl) large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
    */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index1.html">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="why.html">Why</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="examples.html">Examples</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="connect.html">Connect</a>
        </li>
      </ul>
      <span class="navbar-text">
          Navbar text with an inline element
        </span>
    </div>
  </nav>
  <div class="container">

    <h2 class="drop">Drop That Guitar Pick!</h2>
    <p class="header_p">It's <span><i>gonna</i></span> happen anyway...&#128526;</p>
  </div>
</header>
<section>
  <!-- put content here -->
  <div class="container">
    <div class="row col-lg-12 col-sm-6">
      <h2 class="display-4">Join The Club:</h2>
      <div class="container col-lg-12 col-sm-6">

      </div>
      <p class="lead">Membership will give me an idea of just who is interested in Finger-Style Guitar playing...</p>
      <p class="lead">where you come from, playing style, etc., so I can tailor the music presented to your interests.</p>
    </div>
  </div>
</section>
<div class="container">
  <div class="form">
    <form>
      <!-- form, button -->
      <input class="full_name" type="text" placeholder="Full Name" name="name">
      <button type="button" class="btn btn-success">Submit</button>
      <!-- Bootstrap button -->
    </form>
    <br>
    <form>
      <input class="age" type="number" placeholder="Age" name="number">
      <button type="button" class="btn btn-success">Submit</button>
      <!-- Bootstrap button -->
    </form>
  </div>
  <br>
  <div class="form">
    <input class="playing_style" name="electric" list="style" placeholder="Playing Style?">
    <datalist id="style"> <!-- datalist used -->
    					<option value="Finger Style">
    					<option value="Pick">
    			    </datalist>
    <br>
    <input class="where" name="country" list="countries" placeholder="Where from?">
    <datalist id="countries">
                        <option value="Afghanistan">
                        <option value="Albania">
                        <option value="Algeria">
                        <option value="Andorra">
                        <option value="Angola">
                        <option value="Antigua &amp; Deps">
                        <option value="Argentina">
                        <option value="Armenia">
                        <option value="Australia">
                        <option value="Austria">
                        <option value="Azerbaijan">
                        <option value="Bahamas">
                        <option value="Bahrain">
                        <option value="Bangladesh">
                        <option value="Barbados">
                        <option value="Belarus">
                        <option value="Belgium">
                        <option value="Belize">
                        <option value="Benin">
                        <option value="Bhutan">
                        <option value="Bolivia">
                        <option value="Bosnia Herzegovina">
                        <option value="Botswana">
                        <option value="Brazil">
                        <option value="Brunei">
                        <option value="Bulgaria">
                        <option value="Burkina">
                        <option value="Burundi">
                        <option value="Cambodia">
                        <option value="Cameroon">
                        <option value="Canada">
                        <option value="Cape Verde">
                        <option value="Central African Rep">
                        <option value="Chad">
                        <option value="Chile">
                        <option value="China">
                        <option value="Colombia">
                        <option value="Comoros">
                        <option value="Congo">
                        <option value="Congo (Democratic Rep)">
                        <option value="Costa Rica">
                        <option value="Croatia">
                        <option value="Cuba">
                        <option value="Cyprus">
                        <option value="Czech Republic">
                        <option value="Denmark">
                        <option value="Djibouti">
                        <option value="Dominica">
                        <option value="Dominican Republic">
                        <option value="East Timor">
                        <option value="Ecuador">
                        <option value="Egypt">
                        <option value="El Salvador">
                        <option value="Equatorial Guinea">
                        <option value="Eritrea">
                        <option value="Estonia">
                        <option value="Ethiopia">
                        <option value="Fiji">
                        <option value="Finland">
                        <option value="France">
                        <option value="Gabon">
                        <option value="Gambia">
                        <option value="Georgia">
                        <option value="Germany">
                        <option value="Ghana">
                        <option value="Greece">
                        <option value="Grenada">
                        <option value="Guatemala">
                        <option value="Guinea">
                        <option value="Guinea-Bissau">
                        <option value="Guyana">
                        <option value="Haiti">
                        <option value="Honduras">
                        <option value="Hungary">
                        <option value="Iceland">
                        <option value="India">
                        <option value="Indonesia">
                        <option value="Iran">
                        <option value="Iraq">
                        <option value="Ireland (Republic)">
                        <option value="Israel">
                        <option value="Italy">
                        <option value="Ivory Coast">
                        <option value="Jamaica">
                        <option value="Japan">
                        <option value="Jordan">
                        <option value="Kazakhstan">
                        <option value="Kenya">
                        <option value="Kiribati">
                        <option value="Korea North">
                        <option value="Korea South">
                        <option value="Kosovo">
                        <option value="Kuwait">
                        <option value="Kyrgyzstan">
                        <option value="Laos">
                        <option value="Latvia">
                        <option value="Lebanon">
                        <option value="Lesotho">
                        <option value="Liberia">
                        <option value="Libya">
                        <option value="Liechtenstein">
                        <option value="Lithuania">
                        <option value="Luxembourg">
                        <option value="Macedonia">
                        <option value="Madagascar">
                        <option value="Malawi">
                        <option value="Malaysia">
                        <option value="Maldives">
                        <option value="Mali">
                        <option value="Malta">
                        <option value="Marshall Islands">
                        <option value="Mauritania">
                        <option value="Mauritius">
                        <option value="Mexico">
                        <option value="Micronesia">
                        <option value="Moldova">
                        <option value="Monaco">
                        <option value="Mongolia">
                        <option value="Montenegro">
                        <option value="Morocco">
                        <option value="Mozambique">
                        <option value="Myanmar, (Burma)">
                        <option value="Namibia">
                        <option value="Nauru">
                        <option value="Nepal">
                        <option value="Netherlands">
                        <option value="New Zealand">
                        <option value="Nicaragua">
                        <option value="Niger">
                        <option value="Nigeria">
                        <option value="Norway">
                        <option value="Oman">
                        <option value="Pakistan">
                        <option value="Palau">
                        <option value="Panama">
                        <option value="Papua New Guinea">
                        <option value="Paraguay">
                        <option value="Peru">
                        <option value="Philippines">
                        <option value="Poland">
                        <option value="Portugal">
                        <option value="Qatar">
                        <option value="Romania">
                        <option value="Russian Federation">
                        <option value="Rwanda">
                        <option value="St Kitts &amp; Nevis">
                        <option value="St Lucia">
                        <option value="Saint Vincent &amp; the Grenadines">
                        <option value="Samoa">
                        <option value="San Marino">
                        <option value="Sao Tome &amp; Principe">
                        <option value="Saudi Arabia">
                        <option value="Senegal">
                        <option value="Serbia">
                        <option value="Seychelles">
                        <option value="Sierra Leone">
                        <option value="Singapore">
                        <option value="Slovakia">
                        <option value="Slovenia">
                        <option value="Solomon Islands">
                        <option value="Somalia">
                        <option value="South Africa">
                        <option value="South Sudan">
                        <option value="Spain">
                        <option value="Sri Lanka">
                        <option value="Sudan">
                        <option value="Suriname">
                        <option value="Swaziland">
                        <option value="Sweden">
                        <option value="Switzerland">
                        <option value="Syria">
                        <option value="Taiwan">
                        <option value="Tajikistan">
                        <option value="Tanzania">
                        <option value="Thailand">
                        <option value="Togo">
                        <option value="Tonga">
                        <option value="Trinidad &amp; Tobago">
                        <option value="Tunisia">
                        <option value="Turkey">
                        <option value="Turkmenistan">
                        <option value="Tuvalu">
                        <option value="Uganda">
                        <option value="Ukraine">
                        <option value="United Arab Emirates">
                        <option value="United Kingdom">
                        <option value="United States">
                        <option value="Uruguay">
                        <option value="Uzbekistan">
                        <option value="Vanuatu">
                        <option value="Vatican City">
                        <option value="Venezuela">
                        <option value="Vietnam">
                        <option value="Yemen">
                        <option value="Zambia">
                        <option value="Zimbabwe">
                    </datalist>
  </div>
</div>
<!-- content ends here -->
<footer id="sticky-footer" class=" footer py-4 bg-dark text-white-50 ">
  <div class="container text-center">
    <p id="footer_p">Copyright &copy; 2020 <span class="name">Joe Austin Mcintosh</span>. All rights reserved.</p>
    <!-- id used -->
  </div>
</footer>

Answer 1

Основная проблема, из-за которой мой код не работал, заключалась в том, что я каким-то образом упустил из виду необходимые вспомогательные справочные документы, на которые bootstrap предоставляет ссылки. Урок здесь, кажется, заключается в том, что вы должны быть предельно осторожны при чтении инструкций по использованию блока кода, который вы никогда не видели, не говоря уже о том, что использовали раньше. Читайте и перечитывайте все ... каждый раз.