-1

So I made a JavaScript button to toggle dark mode on my page. The problem is that it works everywhere except for in my "navigation menu" section at the top of the page. Ideally, I would want the white text to change to black for all text in this area, including sub-menus/links, etc, like it does for everything else on the page, and the light gray background (just the part in the top navigation bar RGB(59, 58, 58) ) to change to blue, when switched over to "light mode". I don't have the gray to blue background part coded yet, but I can't figure out why the text isn't even changing from white to black. Can someone tell me what is wrong and possibly the easiest way to get it working?

My code:

// dark mode button onchange call multiple functions //
function myFunction() {
  toggleDarkMode();
  swapText();
}

// toggle dark mode//
function toggleDarkMode() {

  var element = document.body;
  element.classList.toggle("dark-mode");
}

// change dark mode button text //
function swapText() {
  var x = document.getElementById("mode");
  if (x.innerHTML === "DARK MODE") {
    x.innerHTML = "LIGHT MODE";
  } else {
    x.innerHTML = "DARK MODE";
  }
}

document.querySelector('#copyright-year').innerText = new Date().getFullYear();
/* My external CSS style sheet */


/* Defaults background color */

body {
  background-color: #222
}


/* CSS for my Links Section / Navigation Menu */

.navbar {
  overflow: hidden;
  background-color: rgb(59, 58, 58);
}

.navbar a {
  float: left;
  font-size: 24px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 24px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #222;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(59, 58, 58);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #222;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.intro {
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
}

.bio {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.pics {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 25px;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  text-align: center;
}

.vids {
  display: inline-block;
}


/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgb(59, 58, 58);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: rgb(14, 112, 224);
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/*dark mode button styling and position */

.button {
  text-align: right
}

.dark-mode {
  background-color: white;
  color: black;
}

footer {
  padding: 1px 1px;
  margin: auto;
  width: 50%;
  text-align: center;
}


/* Internal CSS from here */


/* CSS to make ToolTip*/

.tooltip {
  position: relative;
  margin: auto;
  width: 50%;
  text-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 100%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.video-iframe {
  height: 100vh;
  width: 100vw;
}


/*default body styling */

body {
  font-size: 24px;
  font-family: 'Courier New';
  font-weight: bold;
  color: white;
}
<header>

  <nav>
    <div class="navbar">
      <a href="index.html">Home</a>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Past Assignments
            <i class-"fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="FirstPage.html">First Page</a>
          <a href="FavoriteFood.html">Favorite Food Assignment</a>
          <a href="LinksAssignment.html">Links Assignment</a>
          <a href="Tables.html">Tables Assignment</a>
          <a href="Forms.html">Forms Assignment</a>
        </div>
      </div>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Current Assignment 
            <i class="fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="JavaScript.html">JavaScript Assignment</a>
        </div>
      </div>

      <a href="">Atlas</a>
      <a href="">Canvas</a>
      <a href="">Contact</a>
      <!-- New email link -->

    </div>
  </nav>
</header>


<div style="text-align:right;" id="mode">DARK MODE</div>


<div class="button">
  <label class="switch">
      <input type="checkbox" onchange="myFunction()">
      <span class="slider round"></span>
    </label>
</div>



<div class="intro">
  <h3>Hi. Intro goes here.
    <br><br> More intro goes here.</h3>
</div>


<div class="bio">
  <img src="" alt="none" style="border-radius: 50%;">
  <!-- rounded image -->
  <p>BIO goes here<br><span style="font-size: 14pt;">More BIO goes here.</span><br>
    <span style="font-size: 14pt;">Even more Bio goes here.</span><br>
    <a href="">
      <img src="" alt="none" style="border-radius: 5px 5px 5px 5px" ;>
    </a>
    <a href="">
      <img src="" alt="none">
    </a>


  </p>
</div>


<!-- Paragraph with tooltip text when you hover over it -->
<div class="pics">
  <p>
    <div class="tooltip">Picture and video descriptions go here.</p><br>
  <span class="tooltiptext">ToolTip text goes here</span></div>
</div>

<!-- More images and videos -->
<div class="container">
  <div class="vids">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none"><br>

    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">

    <!-- Video with player and controls -->
    <video style="height: 267px; width: 200px; object-fit: cover;" controls> 
      <source src="pics/Luna5.MP4" type="video/mp4">
    </video></div>

</div>

<br><br><br><br>

<footer>

  <p>Copyright <span id="copyright-year">2021</span>. All Rights Reserved.</p>

</footer>
connexo
  • 53,704
  • 14
  • 91
  • 128
ericiscool
  • 1
  • 4
  • `.navbar{background-color: rgb(59, 58, 58);}` and `.navbar a{color: white;}` is preventing since you are only changing class to `body` when a `radio-button` is clicked – Shashank Gb May 01 '21 at 07:44

1 Answers1

1

Using CSS class.

The problem is you're not applying the dark mode class on the navbar. All you need to do is create a dark mode class for navbar and apply it inside the toggleDarkMode function.

Now, you need to overwrite all default styles using this dark mode class.

Let's add a nav-dark class in your toggleDarkMode function.

var navbar = document.querySelector(".navbar");
navbar.classList.toggle("nav-dark-mode");

Now using this nav-dark class let's overwrite the styles in css. For brevity I've only showed the color and background-color styles below.

.navbar {
  background-color: rgb(59, 58, 58);
}

/* DARK MODE */
.nav-dark {
  background-color: steelblue;
}

.navbar a {
  color: white;
}

/* DARK MODE */
.nav-dark a {
  color: black;
}

.dropdown .dropbtn {
  color: inherit; /* Make this inherit */
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #222;
}

/* DARK MODE */
.nav-dark a:hover,
.nav-dark .dropdown:hover .dropbtn{
  background-color: rgba(255, 255, 255, 0.3);
}

.dropdown-content {
  background-color: rgb(59, 58, 58);
}

/* DARK MODE */
.nav-dark .dropdown-content {
  background-color: steelblue;
}

.dropdown-content a {
  color: white;
}

/* DARK MODE */
.nav-dark .dropdown-content a {
  color: black;
}

.dropdown-content a:hover {
  background-color: #222;
}

/* DARK MODE */
.nav-dark .dropdown-content a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}


// dark mode button onchange call multiple functions //
function myFunction() {
  toggleDarkMode();
  swapText();
}

// toggle dark mode//
function toggleDarkMode() {

  var element = document.body;
  element.classList.toggle("dark-mode");
  
  var navbar = document.querySelector(".navbar");
  navbar.classList.toggle("nav-dark");
}

// change dark mode button text //
function swapText() {
  var x = document.getElementById("mode");
  if (x.innerHTML === "DARK MODE") {
    x.innerHTML = "LIGHT MODE";
  } else {
    x.innerHTML = "DARK MODE";
  }
}

document.querySelector('#copyright-year').innerText = new Date().getFullYear();
/* My external CSS style sheet */


/* Defaults background color */

body {
  background-color: #222
}


/* CSS for my Links Section / Navigation Menu */

.navbar {
  overflow: hidden;
  background-color: rgb(59, 58, 58);
}

/*dark mode for navbar*/
.nav-dark {
  background-color: steelblue;
}

.navbar a {
  float: left;
  font-size: 24px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/*dark mode for navbar*/
.nav-dark a {
  color: black;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 24px;
  border: none;
  outline: none;
  color: inherit;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #222;
}

/*dark mode for navbar*/
.nav-dark a:hover,
.nav-dark .dropdown:hover .dropbtn{
  background-color: rgba(255, 255, 255, 0.3);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(59, 58, 58);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.nav-dark .dropdown-content {
  background-color: steelblue;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav-dark .dropdown-content a {
  color: black;
}

.dropdown-content a:hover {
  background-color: #222;
}

.nav-dark .dropdown-content a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.intro {
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
}

.bio {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.pics {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 25px;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  text-align: center;
}

.vids {
  display: inline-block;
}


/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgb(59, 58, 58);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: rgb(14, 112, 224);
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/*dark mode button styling and position */

.button {
  text-align: right
}

.dark-mode {
  background-color: white;
  color: black;
}

footer {
  padding: 1px 1px;
  margin: auto;
  width: 50%;
  text-align: center;
}


/* Internal CSS from here */


/* CSS to make ToolTip*/

.tooltip {
  position: relative;
  margin: auto;
  width: 50%;
  text-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 100%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.video-iframe {
  height: 100vh;
  width: 100vw;
}


/*default body styling */

body {
  font-size: 24px;
  font-family: 'Courier New';
  font-weight: bold;
  color: white;
}
<header>

  <nav>
    <div class="navbar">
      <a href="index.html">Home</a>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Past Assignments
            <i class-"fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="FirstPage.html">First Page</a>
          <a href="FavoriteFood.html">Favorite Food Assignment</a>
          <a href="LinksAssignment.html">Links Assignment</a>
          <a href="Tables.html">Tables Assignment</a>
          <a href="Forms.html">Forms Assignment</a>
        </div>
      </div>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Current Assignment 
            <i class="fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="JavaScript.html">JavaScript Assignment</a>
        </div>
      </div>

      <a href="">Atlas</a>
      <a href="">Canvas</a>
      <a href="">Contact</a>
      <!-- New email link -->

    </div>
  </nav>
</header>


<div style="text-align:right;" id="mode">DARK MODE</div>


<div class="button">
  <label class="switch">
      <input type="checkbox" onchange="myFunction()">
      <span class="slider round"></span>
    </label>
</div>



<div class="intro">
  <h3>Hi. Intro goes here.
    <br><br> More intro goes here.</h3>
</div>


<div class="bio">
  <img src="" alt="none" style="border-radius: 50%;">
  <!-- rounded image -->
  <p>BIO goes here<br><span style="font-size: 14pt;">More BIO goes here.</span><br>
    <span style="font-size: 14pt;">Even more Bio goes here.</span><br>
    <a href="">
      <img src="" alt="none" style="border-radius: 5px 5px 5px 5px" ;>
    </a>
    <a href="">
      <img src="" alt="none">
    </a>


  </p>
</div>


<!-- Paragraph with tooltip text when you hover over it -->
<div class="pics">
  <p>
    <div class="tooltip">Picture and video descriptions go here.</p><br>
  <span class="tooltiptext">ToolTip text goes here</span></div>
</div>

<!-- More images and videos -->
<div class="container">
  <div class="vids">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none"><br>

    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">

    <!-- Video with player and controls -->
    <video style="height: 267px; width: 200px; object-fit: cover;" controls> 
      <source src="pics/Luna5.MP4" type="video/mp4">
    </video></div>

</div>

<br><br><br><br>

<footer>

  <p>Copyright <span id="copyright-year">2021</span>. All Rights Reserved.</p>

</footer>

Using JS and CSS variables.

If you want to achieve this using JavaScript, you can use css variables for color and background-color and then change it using css.

So, the only three varibles you need for navbar are the following:

:root {
  --nav-bg: rgb(59, 58, 58);
  --nav-clr: #fff;
  --nav-item-hover: #222;
}

Then you can change these variables inside toggleDarkMode function like this:

document.querySelector(":root").style.setProperty('--nav-bg', 'steelblue');
document.querySelector(":root").style.setProperty('--nav-clr', '#000');
document.querySelector(":root").style.setProperty('--nav-item-hover', 'rgba(255, 255, 255, 0.3)');


// dark mode button onchange call multiple functions //
function myFunction() {
  toggleDarkMode();
  swapText();
}

// toggle dark mode//
function toggleDarkMode() {

  var element = document.body;
  element.classList.toggle("dark-mode");
  
  document.querySelector(":root").style.setProperty('--nav-bg', 'steelblue');
  document.querySelector(":root").style.setProperty('--nav-clr', '#000');
  document.querySelector(":root").style.setProperty('--nav-item-hover', 'rgba(255, 255, 255, 0.3)');
}

// change dark mode button text //
function swapText() {
  var x = document.getElementById("mode");
  if (x.innerHTML === "DARK MODE") {
    x.innerHTML = "LIGHT MODE";
  } else {
    x.innerHTML = "DARK MODE";
  }
}

document.querySelector('#copyright-year').innerText = new Date().getFullYear();
/* My external CSS style sheet */
:root {
  --nav-bg: rgb(59, 58, 58);
  --nav-clr: #fff;
  --nav-item-hover: #222;
}

/* Defaults background color */

body {
  background-color: #222;
}

/* CSS for my Links Section / Navigation Menu */

.navbar {
  overflow: hidden;
  background-color: var(--nav-bg);
}

.navbar a {
  float: left;
  font-size: 24px;
  color: var(--nav-clr);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 24px;
  border: none;
  outline: none;
  color: inherit;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: var(--nav-item-hover);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--nav-bg);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: var(--nav-clr);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: var(--nav-item-hover);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.intro {
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
}

.bio {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.pics {
  font-size: 24px;
  margin: auto;
  width: 50%;
  text-align: center;
  padding-top: 25px;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  text-align: center;
}

.vids {
  display: inline-block;
}


/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgb(59, 58, 58);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: rgb(14, 112, 224);
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/*dark mode button styling and position */

.button {
  text-align: right
}

.dark-mode {
  background-color: white;
  color: black;
}

footer {
  padding: 1px 1px;
  margin: auto;
  width: 50%;
  text-align: center;
}


/* Internal CSS from here */


/* CSS to make ToolTip*/

.tooltip {
  position: relative;
  margin: auto;
  width: 50%;
  text-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 100%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.video-iframe {
  height: 100vh;
  width: 100vw;
}


/*default body styling */

body {
  font-size: 24px;
  font-family: 'Courier New';
  font-weight: bold;
  color: white;
}
<header>

  <nav>
    <div class="navbar">
      <a href="index.html">Home</a>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Past Assignments
            <i class-"fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="FirstPage.html">First Page</a>
          <a href="FavoriteFood.html">Favorite Food Assignment</a>
          <a href="LinksAssignment.html">Links Assignment</a>
          <a href="Tables.html">Tables Assignment</a>
          <a href="Forms.html">Forms Assignment</a>
        </div>
      </div>
      <div class="dropdown">
        <button style="font-weight: bold;" class="dropbtn">Current Assignment 
            <i class="fa fa-caret-down"></i>
          </button>
        <div class="dropdown-content">
          <a href="JavaScript.html">JavaScript Assignment</a>
        </div>
      </div>

      <a href="">Atlas</a>
      <a href="">Canvas</a>
      <a href="">Contact</a>
      <!-- New email link -->

    </div>
  </nav>
</header>


<div style="text-align:right;" id="mode">DARK MODE</div>


<div class="button">
  <label class="switch">
      <input type="checkbox" onchange="myFunction()">
      <span class="slider round"></span>
    </label>
</div>



<div class="intro">
  <h3>Hi. Intro goes here.
    <br><br> More intro goes here.</h3>
</div>


<div class="bio">
  <img src="" alt="none" style="border-radius: 50%;">
  <!-- rounded image -->
  <p>BIO goes here<br><span style="font-size: 14pt;">More BIO goes here.</span><br>
    <span style="font-size: 14pt;">Even more Bio goes here.</span><br>
    <a href="">
      <img src="" alt="none" style="border-radius: 5px 5px 5px 5px" ;>
    </a>
    <a href="">
      <img src="" alt="none">
    </a>


  </p>
</div>


<!-- Paragraph with tooltip text when you hover over it -->
<div class="pics">
  <p>
    <div class="tooltip">Picture and video descriptions go here.</p><br>
  <span class="tooltiptext">ToolTip text goes here</span></div>
</div>

<!-- More images and videos -->
<div class="container">
  <div class="vids">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none"><br>

    <img src="" width="200" height="267" alt="none">
    <img src="" width="200" height="267" alt="none">

    <!-- Video with player and controls -->
    <video style="height: 267px; width: 200px; object-fit: cover;" controls> 
      <source src="pics/Luna5.MP4" type="video/mp4">
    </video></div>

</div>

<br><br><br><br>

<footer>

  <p>Copyright <span id="copyright-year">2021</span>. All Rights Reserved.</p>

</footer>
Som Shekhar Mukherjee
  • 4,701
  • 1
  • 12
  • 28
  • It works but still you need to change on `.dropdown-content` and `.dropdown-content a` – Shashank Gb May 01 '21 at 07:54
  • @ Som Shekhar Mukherjee Thanks that worked for the background color change but the text still does not change from white to black for some reason. – ericiscool May 01 '21 at 08:03
  • @ShashankGb I've updated my answer, please have a look. – Som Shekhar Mukherjee May 01 '21 at 08:30
  • @ShashankGb It made some progress but still not there. Only 2 things were changed to black text ("current assignments and past assignments"). All other text stays white, including the text under current and past assignments. The background also no longer changes to blue on toggle. I'm worried I may have missed some of the CSS. Can you copy what my entire css file should look like. That will be easier if I could just copy and paste that. Also the backgrounds for the hover and sub menus should change on toggle as well if that was not in your code. – ericiscool May 01 '21 at 08:33
  • @ericiscool You can copy the entire CSS file from the snippet. Click on show code snippet and then you can copy the css and js part. – Som Shekhar Mukherjee May 01 '21 at 08:36
  • @ericiscool And I guess you wrongly tagged Shashank in your comment. – Som Shekhar Mukherjee May 01 '21 at 08:37
  • 1
    It's okay I just gave suggestions to @SomShekharMukherjee at the beginning. You guys can continue now onwards. – Shashank Gb May 01 '21 at 08:42
  • sorry to everyone for the comment mistakes. still learning this site. @Som Shekhar Mukherjee thank you very much your answer it fixed everything! – ericiscool May 01 '21 at 08:47
  • @ericiscool It's okay. Is it working now? Is your problem resolved? – Som Shekhar Mukherjee May 01 '21 at 08:48