Why does Bootstrap icon disappear when nav is collapsed? - html

Question

Using Bootstrap 4 nav, all looks good and links work, until screen size is reduced. For reasons I haven't been able to grok, the icon in right corner appears, but is not functional.
Site passes w3 validator for both html and css. I've looked at examples and tried different code for the button all to no avail.
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...😎</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 & 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 & Nevis">
<option value="St Lucia">
<option value="Saint Vincent & the Grenadines">
<option value="Samoa">
<option value="San Marino">
<option value="Sao Tome & 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 & 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 © 2020 <span class="name">Joe Austin Mcintosh</span>. All rights reserved.</p>
<!-- id used -->
</div>
</footer>

Answer 1

The underlying issue causing my code not to work was that i somehow overlooked the required supporting ref docs that bootstrap provides links to. The lesson here seems to be that you must be extremely careful when reading instructions for the use of a block of code you never saw, let alone used before. Read and reread everything...every time.