My goal is for my hamburger menu to close when an item is clicked inside of it. As of right now, the menu only uses html and css.
The difference between this nav bar and others is that mine is created from a input checkbox html element, what i need is for my checkbox to uncheck when a link is clicked inside of the hamburger. This should close the entire menu just like it would if i clicked on the hamburger. Also, could you explain what and why the javascript does what it does, i don't have much experience with javascript, thanks. :)
I also made the checkbox visible just so that we can have a better understanding of whats going on.
My CSS:
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle:checked + .menu {
display: block;
}
}
My HTML:
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</div>
Javscript may not actually be required, depending on your needs.
If you give the div containing your nav links an ID you can target this with an a tag setting the href to the ID. Then you can use the :target selector to change the visibility of our navigation div.
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.toggle {
text-decoration: none;
color: #33334d;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
.toggle,
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
.toggle,
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#menu:target,
#toggle:checked+.menu {
display: block;
}
}
<div class="nav">
<a class="toggle" href="#menu">☰</a>
<div class="menu" id="menu">
example
example
example
example
example
example
example
</div>
</div>
Wow, interesting. It's a pretty weird practise, what you have, but it could work. You can make menu show/hide by input checked. Very interesting. I have never think of like that.
But also you will need a piece of JS code.
By CSS you can handle some basic selector like :hover, :focus, :active etc. In our your case you also make some interesting click event. But checkbox is not for that purpose.
Click and other event are handled by JS (more https://www.w3schools.com/js/js_events.asp).
So in our case, we select all links:
var links = document.querySelectorAll('.menu a');
then we have to add click event to every link, which will set our input to checked="false" = close menu.
This JS code will only work, when selected links are rendered, so you need to put this piece of code to the end of your html file before </body> or use window.onload...
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle {
display: none;
}
#toggle:checked + .menu {
display: block;
}
}
<label class="nav" for="toggle">
<div class="icon">☰</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</label>
Related
I've been trying to follow a few tutorials to turn a horizontal menubar into a drop-down hamburger menu when displayed on smaller screens, but I'm struggling to make it come together properly. I noticed a lot of tutorials seem to do away with ul/li format, which I'd like to save for semantic and accessible reasons, but this has left me struggling to get the dropdown to appear correctly on the screen.
My goal is to allow the hamburger menu to open the four menu items, centered on the screen, below the top header bar. I've managed to make the hamburger menu "work," but it's opening the items not centered and not below the top menubar. Any suggestions that don't require revamping the entire menubar code, if possible?
const menu = document.querySelector(".nav");
let open;
function openMenu() {
if (open) {
menu.style.display = "none";
open = false;
} else if (!open) {
menu.style.display = "block";
open = true;
}
}
.menubar {
width: 100%;
height: 50px;
line-height: 50px;
vertical-align: middle;
background-color: #fff;
border-bottom: 1px solid #f5f5f5;
position: fixed;
top: 0;
-webkit-user-select: all;
user-select: none;
display: flex;
align-items: center;
}
.logo {
font-size: 24px;
display: flex;
align-items: center;
padding-left: 15px;
position: absolute;
}
.nav {
display: flex;
font-size: 18px;
flex-direction: row;
list-style: none;
margin: 0 auto;
padding: 0;
}
.nav li {
margin: 0 15px;
}
.hamburger {
margin: 0 13px 0 auto;
height: inherit;
}
#media screen and (min-width: 801px) {
.nav {
display: flex !important;
}
.hamburger {
display: none;
}
}
#media screen and (max-width: 800px) {
.hamburger {
display: flex;
}
.nav {
display: none;
text-align: center;
}
}
<body>
<div class="menubar">
WEBSITE NAME
<ul class="nav">
<li>HOME</li>
<li>MENU1</li>
<li>MENU2</li>
<li>ABOUT</li>
</ul>
<input type="image" class="hamburger" onclick={openMenu()} src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/800px-Hamburger_icon.svg.png" />
</div>
</body>
Accompanying JSFiddle.
You can add a window load and resizing listener. When the window gets smaller than 800px the script will add a class to your element.
I currently have it set to place a class .mobile. Made the necessary stylistic changes to this class for the mobile menu
Add this in your JS code:
window.addEventListener('resize', setMobileClass);
window.addEventListener('load', setMobileClass);
function setMobileClass() {
if (window.innerWidth <= 800) {
menu.classList.add('mobile');
} else {
menu.classList.remove('mobile');
}
};
Add this in your CSS:
.mobile {
position: absolute;
right: 0px;
top: 50px;
}
EXAMPLE:
const menu = document.querySelector(".nav");
let open;
function openMenu() {
if (open) {
menu.style.display = "none";
open = false;
} else if (!open) {
menu.style.display = "block";
open = true;
}
}
window.addEventListener('resize', setMobileClass);
window.addEventListener('load', setMobileClass);
function setMobileClass() {
if (window.innerWidth <= 800) {
menu.classList.add('mobile');
} else {
menu.classList.remove('mobile');
}
};
.menubar {
width: 100%;
height: 50px;
line-height: 50px;
vertical-align: middle;
background-color: #fff;
border-bottom: 1px solid #f5f5f5;
position: fixed;
top: 0;
-webkit-user-select: all;
user-select: none;
display: flex;
align-items: center;
}
.logo {
font-size: 24px;
display: flex;
align-items: center;
padding-left: 15px;
position: absolute;
}
.nav {
display: flex;
font-size: 18px;
flex-direction: row;
list-style: none;
margin: 0 auto;
padding: 0;
}
.nav li {
margin: 0 15px;
}
.hamburger {
margin: 0 13px 0 auto;
height: inherit;
}
#media screen and (min-width: 801px) {
.nav {
display: flex !important;
}
.hamburger {
display: none;
}
}
#media screen and (max-width: 800px) {
.hamburger {
display: flex;
}
.nav {
display: none;
text-align: center;
}
}
.mobile {
position: absolute;
right: 0px;
top: 50px;
}
<div class="menubar">
WEBSITE NAME
<ul class="nav">
<li>HOME</li>
<li>MENU1</li>
<li>MENU2</li>
<li>ABOUT</li>
</ul>
<input type="image" class="hamburger" onclick={openMenu()}
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/800px-Hamburger_icon.svg.png" />
</div>
I found a fitting and elegant solution based on 54ka's answer. Instead of adding a mobile class with extra JS code, I modified screen-size restricted nav class to be the following:
#media screen and (max-width: 800px) {
.hamburger {
display: flex;
}
.nav {
display: none;
position: absolute;
text-align: center;
width: 100%;
right: 0px;
top: 50px;
}
}
This ensured that the menu would appear centered, underneath the menubar. Additional background-color and border commands can be added to clean up the dropdown menu.
I am trying to add active classes on on my navigation menu so there is a border and the writting is coloured for the specific page your on but it isn't working. It worked for the primary navigation but wont work for my secondary one any ideas as to why its not working would be appreciated thank you? my code is down below. the active class at the bottom is what should be applied
const currentLocations = location.href;
const menuItems = document.querySelectorAll('.secondary a');
const menuLengths = menuItems.length
for (let i = 0; i < menuLengths; i++) {
if (menuItems[i].href === currentLocations) {
menuItems[i].className = "active"
}
}
.secondarynav-item-trading {
position: relative;
margin-top: 10px;
padding: 15px 5px;
width: 1430px;
top: 13px;
left: 30px;
}
.secondarynav-item-trading a {
display: inline-block;
text-decoration: none;
color: black;
font-size: 14px;
text-align: center;
padding: 10px;
border-radius: 20px;
width: 190px;
}
.secondarynavigation-item-trading ul {
list-style: none;
}
.secondarynavigation-item-trading li {
display: inline-block;
margin-top: 0;
}
.secondarynavigation-item-trading a:hover {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
.secondarynavigation-item-trading a:hover::before {
width: 100%;
}
.secondarynav-item-trading ::after {
content: "";
display: table;
clear: both;
}
.secondarynavigation-item-trading a::before {
content: "";
display: block;
height: 5px;
background-color: #fd886b;
position: relative;
top: 40px;
width: 0%;
transition: all ease-in-out 250ms;
}
.secondary a.active {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
<header class="secondarynav-messages">
<div class="secondary">
<!-- secondary navigation for homepage -->
<nav alt="secondarynavigation-messages" id="secondarynavigation-messages">
<!-- secondary navigation buttons below the main navigation -->
<ul class="secondarynavigation-messages" id="secondarynavigation-messages">
<li>Inbox</li>
<li>Sent</li>
<li>Compose a message</li>
<li>Drafts</li>
<li>Archived</li>
</ul>
</nav>
</div>
</header>
the way I have it in the code above is working for the first page but none of the others but I have done the exact same thing in the primary nav and it worked i also copied the code on a new website document and it worked but for some reason its not working here
I am having a problem with an absolute element. This element is the floating-count which is on the top of the navigation.
Problem is when I hover my mouse on floating-count element, the drop-down arrow also is hovering (it should suppose to hover or change color when the navigation hovers). Then when I am clicking the floating-count element the drop-down navigation also showing (it should suppose to show when the navigation was clicked).
I tried changing (playing with it as I expect to see the solution) and adding z-index to the elements but I am confused with it.
Code here:
$('.mnav').on('click', function() {
if ($(this).children('.dpdown').is(":hidden")) {
console.log('show');
$(this).children('.dpdown').slideDown("fast");
} else {
$(this).children('.dpdown').slideUp("fast");
console.log('hide');
}
});
li.mnav,
.navigation ul.right li.mnav {
display: inline-block;
position: relative;
}
a.text-link,
.navigation ul.right li.mnav a.text-link {
color: #fff;
font-size: 15px;
line-height: 15px;
padding: 14px 24px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.nav-arrow {
background: yellow;
}
.nav-arrow:after {
top: 40%;
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #1b6b00;
border-width: 8px;
}
.floating-count {
position: absolute;
z-index: 1;
border-radius: 20px;
background: red;
padding: 4px 8px;
top: -12px;
right: -2px;
text-decoration: none;
color: #FFF;
}
.dpdown {
position: absolute;
left: 0;
top: 50px;
width: 300px;
display: none;
z-index: 1;
}
.dpdown ul li a {
font-size: 12px;
color: #eaf2ac;
padding: 5px 30px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.dpdown ul {
list-style-type: none;
background-color: #1b6b00;
text-align: left;
margin: 0;
padding: 4px 0;
}
ul.right {
list-style-type: none;
background-color: #208100;
text-align: center;
margin: 0;
padding: 0;
float: left;
border-radius: 5px;
}
ul.right li.mnav:hover,
.navigation ul.right li.mnav a.text-link:hover {
color: #ffea00;
}
.dpdown:hover>.nav-arrow:after {
color: #ffea00;
}
.navigation .mnav:hover>.nav-arrow:after {
border-top-color: #ffea00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<ul class="right">
<li class="mnav">
Drop Down<span class="nav-arrow"></span>
<span class="floating-count-wrap"><a class="floating-count" href="/#count">2</a></span>
<div class="dpdown">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</li>
</ul>
</div>
Try it in jsfiddle:
You have the hover style based on .mnav and the js dropdown triggered by .mnav but .floating-count-wrap is a child of .mnav so it is triggering those events.
I adjusted the css and js to use .mnav .test-link as the selector. I also had to make the css rule use sibling and not parent selection. Similarily, in the js, the selector for the dropdown is no longer a child of $(this) so I updated that to $(this).parent()
updated js fiddle
js
$('.mnav .text-link').on('click', function() { ... });
css
.navigation .mnav .text-link:hover + .nav-arrow:after { ... }
Hello I am currently learning responsive design and I am trying to make a responsive navigation bar which turns in to a menu when visited on a phone or mobile device! Everything works except not all the navigation items show on the mobile device and I am not sure why! This is the code:
<div class="container">
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> RONNIE<b>GURR</b></li>
<section class="div_navbar_items">
<li class="navbar_items"> HOME </li>
<li class="navbar_items"> ABOUT US </li>
<li class="navbar_items"> GALLERY </li>
<li class="navbar_items"> SHOP </li>
<li class="navbar_items"> CONTACT </li>
</section>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<script src="js/responsive.js"></script>
Here is the CSS:
.container {
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
width: 100%;
left:0;
top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
list-style-type: none;
display: inline-block;
}
.navbar li a {
margin-top: 50px;
font-family: 'Cabin', sans-serif;
font-size: 1.3em;
color: white;
font-weight: 700px;
display: inline-block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.navbar li.navbar_items a:hover {
border-bottom-style: solid;
border-bottom-color: white;
/* padding-bottom: 5px; */
}
.navbar li.icon {
display: none;
}
.div_navbar_items {
float: right;
padding-right:1%;
}
/*Start of mobile nav*/
#media screen and (max-width:875px) {
.navbar li.navbar_items {
display: none;
}
.navbar li.icon {
float: right;
display: inline-block;
position: absolute;
right: 0;
top: 19px;
}
}
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
}
.navbar.responsive li.logo {
floatL: left;
display: block;
}
.navbar.responsive .div_navbar_items {
float: none;
padding-right:0;
}
.navbar.responsive li.navbar_items {
display: block;
padding: 50px;
font-size: 25px;
}
.navbar.responsive li.navbar_items a {
display: block;
text-align: center;
}
.navbar.responsive li.navbar_items a:hover{
color:#17171e;
border-bottom-color: transparent;
}
}
/*End of mobile nav*/
And here is the JS:
function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
codepen: https://codepen.io/anon/pen/JyEoWY
I think this will get you in the right direction, then you can decide upon what you'd like to do from here. You are setting your navbar to be 100vh, which is 100% height of the screen, so you need to make sure your padding and margin on your nav elements aren't so much. Try removing any margin and padding from these two styles, then adapt it on your own from here. If you don't want to change this stuff, refer to the second part of my answer, and just make the nav scrollable.
.navbar li a {
margin-top: 0px;
}
#media screen and (max-width: 875px) {
.navbar.responsive li.navbar_items {
display: block;
padding: 0px;
font-size: 25px;
}
}
Also, if you look in .navbar styling (line 8 of your codepen) you have it set to overflow: hidden. You can update your .navbar.responsive class with overflow of scroll to get it to work.
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
overflow: scroll; // Set overflow to scroll
}
}
I guess this happenes because you make .navbar.responsive {
position:fixed;
And you just can't watch all content of block, because it's not allow to scroll. When i change this property to absolute, i looked all items of menu.
By the way, you write CSS property font-weight with px, font-weight: 700px, but it shouldn't be px, it's relative value: font-weight: 700
For some reason, my HTML dropdown menu is returning completely blank values. However, you can see the values when you hover your mouse over them. My code is at my GitHub here: https://github.com/kekTEHfrahg/bengalidabbois/blob/master/index.html
EDIT: Sorry, got the wrong link. I fixed it now.
Also, for the specific code with my dropdown:
<div translate="no" class="compact marquee" id="div_language">
<select id="select_language" onchange="updateCountry()">
<option value="0">Afrikaans</option><option value="1">Bahasa Indonesia</option><option value="2">Bahasa Melayu</option><option value="3">Català</option><option value="4">Čeština</option><option value="5">Dansk</option><option value="6">Deutsch</option><option value="7">English</option><option value="8">Español</option><option value="9">Euskara</option><option value="10">Filipino</option><option value="11">Français</option><option value="12">Galego</option><option value="13">Hrvatski</option><option value="14">IsiZulu</option><option value="15">Íslenska</option><option value="16">Italiano</option><option value="17">Lietuvių</option><option value="18">Magyar</option><option value="19">Nederlands</option><option value="20">Norsk bokmål</option><option value="21">Polski</option><option value="22">Português</option><option value="23">Română</option><option value="24">Slovenščina</option><option value="25">Slovenčina</option><option value="26">Suomi</option><option value="27">Svenska</option><option value="28">Tiếng Việt</option><option value="29">Türkçe</option><option value="30">Ελληνικά</option><option value="31">български</option><option value="32">Pусский</option><option value="33">Српски</option><option value="34">Українська</option><option value="35">한국어</option><option value="36">中文</option><option value="37">日本語</option><option value="38">हिन्दी</option><option value="39">ภาษาไทย</option></select> <select id="select_dialect" style="visibility: visible;">
<option value="en-AU">Australia</option><option value="en-CA">Canada</option><option value="en-IN">India</option><option value="en-NZ">New Zealand</option><option value="en-ZA">South Africa</option><option value="en-GB">United Kingdom</option><option value="en-US">United States</option></select>
</div>
</div>
Here is the CSS code. Honestly, I don't find anything wrong with it. Is there something wrong with the CSS that makes the dropdown blank?
<style>
.speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
.speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
.speech img {float: right; width: 40px }
l {
border: ipx solid black
}
/* Style the tabs */
ul.tab {
list-style-type: none;
border-radius:10px;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f2f2f2;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
background-color:#d9d9d9;
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color:#999999 ;
}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
border-radius:10px;
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* All content below pertains to the function of the tabs in an "accordian" style */
button.accordion {
border-radius:26px;
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '>>';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "<<";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#info {
font-size: 20px;
}
#div_start {
float: right;
}
#headline {
text-decoration: none
}
#results {
font-size: 14px;
font-weight: bold;
border: 1px solid #ddd;
padding: 15px;
text-align: left;
min-height: 150px;
}
#start_button {
border: 0;
background-color:transparent;
padding: 0;
}
.interim {
color: gray;
}
.final {
color: black;
padding-right: 3px;
}
.button {
display: none;
}
.marquee {
margin: 20px auto;
}
#buttons {
margin: 10px 0;
position: relative;
top: -50px;
}
#copy {
margin-top: 20px;
}
#copy > div {
display: none;
margin: 0 70px;
}
body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
/* Set the width of the sidebar to 120px */
.w3-sidebar {width: 120px;background: #222;}
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
#main {margin-left: 120px}
/* Remove margins from "page content" on small screens */
#media only screen and (max-width: 600px) {#main {margin-left: 0}}
</style>
It looks like the W3Schools style sheet sets the text color of every element to white (color: #fff!important;).
This can be easily remedied with changing the text color for select and option elements:
select, option {
color: black;
}
You can debug something like this by opening your browser's development tools, right-clicking the element and looking at the CSS used to render the element. In this particular case, your body tag uses the w3-green class, which has the following CSS by default:
.w3-green, .w3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important;
}
In addition, the normalize style sheet (which has the highest specificity for the select elements) tells the browser to inherit the color from the parent (there's no other color declarations in each of select's parents until it reaches the body tag).
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}
You have a lot of CSS libraries and they are interfering with each other. Bootstrap.min.css is setting the color of your select to "inherit". Add this after bootstrap's style to fix that.
select {color:black;}
You can debug your code by using your browser's developer tools and see what style is being applied to your elements and from which library.