javascript - Solid color background is applying with some transparency

I am working on menu for mobile devices. When we open the menu the background is visible through it.

I have a background-color set white in #headerPop but it is not working as expected and element behind it are visible even i change the color to black i still see elements beneath it.

By the way this ui is made for mobiles so it will be goofy on desktop kindly view it phone mode in web developer tools.

function getBID(elementName) {
  return document.getElementById(elementName);
}

const driverImg = getBID("driverImg");
const namee = getBID("name");
const logoBox = getBID("logoBox");
const namedisc = getBID("namedisc");
const start = getBID("start");
const display = getBID("display");
const headerHamburger = getBID("headerHamburger");
const headerLogo = getBID("headerLogo");
const header = getBID("header");
const headerPopLi = document.querySelectorAll("#headerPop ul li");
const headerPop = getBID("headerPop");

driverImg.onload = function () {
  namee.style.fontSize = logoBox.offsetHeight / 2 + "px";
  driverImg.style.left = namee.offsetWidth + "px";
  logoBox.style.width = namee.offsetWidth + driverImg.offsetWidth + "px";
  logoBox.style.left = (start.offsetWidth - logoBox.offsetWidth) / 2 + "px";
  namedisc.style.width = namee.offsetWidth + "px";
  namedisc.style.top = namee.offsetHeight + "px";
};
function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function run() {
  await wait(3000);
  start.style.visibility = "hidden";
  display.style.visibility = "visible";
  headerHamburger.style.height = headerLogo.offsetHeight + "px";
  headerHamburger.style.top =
    (header.offsetHeight - headerHamburger.offsetHeight) / 2 + "px";
  const liHeight = headerPop.offsetHeight / 5;
  headerHamburger.onclick = function () {
    const d1 = window.getComputedStyle(headerPop).visibility;
    if (d1 == "visible") {
      headerPop.style.visibility = "hidden";
    } else {
      headerPop.style.visibility = "visible";
    }
  };
  headerPopLi.forEach((li) => {
    li.addEventListener("click", () => {});
    li.style.height = liHeight + "px";
    li.style.fontSize = liHeight / 2 + "px";
    if (li.innerHTML == "Home") {
      li.style.borderTop = "1px solid black";
    }
  });
}

run();

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#start {
  background-color: rgba(72, 188, 132, 0.425);
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#logoBox {
  position: absolute;
  height: 10%;
  top: 30%;
}
#name {
  position: absolute;
  color: rgb(72, 188, 132);
  margin: 0;
  top: 10%;
}
#driverImg {
  position: absolute;
  height: 80%;
  top: 10%;
}
#namedisc {
  font-family: "Courier New", Courier, monospace;
  position: absolute;
  color: rgb(72, 188, 132);
  text-align: center;
}

#display {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
}

#header {
  position: fixed;
  left: 0;
  top: 0;
  height: 10vh;
  width: 100%;
  background-color: rgba(72, 188, 132, 0.425);
}

#headerLogo {
  position: absolute;
  height: 70%;
  top: 30%;
  left: 15%;
}

#headerHamburger {
  position: absolute;
  right: 15%;
  filter: invert(1);
}

#headerPop {
  position: fixed;
  top: 10%;
  left: 0;
  height: 27%;
  width: 100%;
  text-align: center;
  background-color: white;
  visibility: hidden;
}

#headerPop ul {
  margin: 0;
  padding: 0;
}

#headerPop ul li {
  font-family: "Courier New", Courier, monospace;
  font-weight: 800;
  color: black;
  align-content: center;
  border-bottom: 1px solid black;
}

#body {
  position: relative;
  top: 10vh;
  width: 100vw;
}

#home {
  position: relative;
  height: 80vh;
  width: 100vw;
}

#services {
  position: relative;
  height: 80vh;
  width: 100vw;
}

#caption {
  position: relative;
  margin: 3vh auto;
  width: 80vw;
  font-family: "Courier New", Courier, monospace;
  color: rgb(72, 188, 132);
  text-align: center;
  font-size: 2vh;
  font-weight: 800;
}

#home h1 {
  position: relative;
  margin: 3vh auto;
  width: 80vw;
  color: rgb(43, 43, 43);
  text-align: center;
  font-size: 3vh;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./mobile.css" />
  </head>
  <body>
    <div id="start">
      <div id="logoBox">
        <h1 id="name">Carnex</h1>
        <img src="./resources/driver.png" alt="driver icon" id="driverImg" />
        <h1 id="namedisc">Book Drivers</h1>
      </div>
    </div>
    <div id="display">
      <div id="header">
        <h1 id="headerLogo">LOGO HERE</h1>
        <img src="./resources/hamburger.png" alt="hamburger icon" id="headerHamburger" />
      </div>
      <div id="headerPop">
        <ul>
          <li>Home</li>
          <li>Services</li>
          <li>become a driver</li>
          <li>About Us</li>
          <li>Contact US</li>
        </ul>
      </div>
      <div id="body">
        <section id="home">
          <div id="caption">Hire drivers with ease</div>
          <h1>Reliable Drivers for Your Car, Anytime, Anywhere.</h1>
        </section>
        <section id="services"></section>
        <section id="aboutUs"></section>
        <section id="contactUs"></section>
      </div>
    </div>
    <script src="./mobile.js"></script>
  </body>
</html>

I am working on menu for mobile devices. When we open the menu the background is visible through it.

I have a background-color set white in #headerPop but it is not working as expected and element behind it are visible even i change the color to black i still see elements beneath it.

By the way this ui is made for mobiles so it will be goofy on desktop kindly view it phone mode in web developer tools.

function getBID(elementName) {
  return document.getElementById(elementName);
}

const driverImg = getBID("driverImg");
const namee = getBID("name");
const logoBox = getBID("logoBox");
const namedisc = getBID("namedisc");
const start = getBID("start");
const display = getBID("display");
const headerHamburger = getBID("headerHamburger");
const headerLogo = getBID("headerLogo");
const header = getBID("header");
const headerPopLi = document.querySelectorAll("#headerPop ul li");
const headerPop = getBID("headerPop");

driverImg.onload = function () {
  namee.style.fontSize = logoBox.offsetHeight / 2 + "px";
  driverImg.style.left = namee.offsetWidth + "px";
  logoBox.style.width = namee.offsetWidth + driverImg.offsetWidth + "px";
  logoBox.style.left = (start.offsetWidth - logoBox.offsetWidth) / 2 + "px";
  namedisc.style.width = namee.offsetWidth + "px";
  namedisc.style.top = namee.offsetHeight + "px";
};
function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function run() {
  await wait(3000);
  start.style.visibility = "hidden";
  display.style.visibility = "visible";
  headerHamburger.style.height = headerLogo.offsetHeight + "px";
  headerHamburger.style.top =
    (header.offsetHeight - headerHamburger.offsetHeight) / 2 + "px";
  const liHeight = headerPop.offsetHeight / 5;
  headerHamburger.onclick = function () {
    const d1 = window.getComputedStyle(headerPop).visibility;
    if (d1 == "visible") {
      headerPop.style.visibility = "hidden";
    } else {
      headerPop.style.visibility = "visible";
    }
  };
  headerPopLi.forEach((li) => {
    li.addEventListener("click", () => {});
    li.style.height = liHeight + "px";
    li.style.fontSize = liHeight / 2 + "px";
    if (li.innerHTML == "Home") {
      li.style.borderTop = "1px solid black";
    }
  });
}

run();

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#start {
  background-color: rgba(72, 188, 132, 0.425);
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#logoBox {
  position: absolute;
  height: 10%;
  top: 30%;
}
#name {
  position: absolute;
  color: rgb(72, 188, 132);
  margin: 0;
  top: 10%;
}
#driverImg {
  position: absolute;
  height: 80%;
  top: 10%;
}
#namedisc {
  font-family: "Courier New", Courier, monospace;
  position: absolute;
  color: rgb(72, 188, 132);
  text-align: center;
}

#display {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
}

#header {
  position: fixed;
  left: 0;
  top: 0;
  height: 10vh;
  width: 100%;
  background-color: rgba(72, 188, 132, 0.425);
}

#headerLogo {
  position: absolute;
  height: 70%;
  top: 30%;
  left: 15%;
}

#headerHamburger {
  position: absolute;
  right: 15%;
  filter: invert(1);
}

#headerPop {
  position: fixed;
  top: 10%;
  left: 0;
  height: 27%;
  width: 100%;
  text-align: center;
  background-color: white;
  visibility: hidden;
}

#headerPop ul {
  margin: 0;
  padding: 0;
}

#headerPop ul li {
  font-family: "Courier New", Courier, monospace;
  font-weight: 800;
  color: black;
  align-content: center;
  border-bottom: 1px solid black;
}

#body {
  position: relative;
  top: 10vh;
  width: 100vw;
}

#home {
  position: relative;
  height: 80vh;
  width: 100vw;
}

#services {
  position: relative;
  height: 80vh;
  width: 100vw;
}

#caption {
  position: relative;
  margin: 3vh auto;
  width: 80vw;
  font-family: "Courier New", Courier, monospace;
  color: rgb(72, 188, 132);
  text-align: center;
  font-size: 2vh;
  font-weight: 800;
}

#home h1 {
  position: relative;
  margin: 3vh auto;
  width: 80vw;
  color: rgb(43, 43, 43);
  text-align: center;
  font-size: 3vh;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./mobile.css" />
  </head>
  <body>
    <div id="start">
      <div id="logoBox">
        <h1 id="name">Carnex</h1>
        <img src="./resources/driver.png" alt="driver icon" id="driverImg" />
        <h1 id="namedisc">Book Drivers</h1>
      </div>
    </div>
    <div id="display">
      <div id="header">
        <h1 id="headerLogo">LOGO HERE</h1>
        <img src="./resources/hamburger.png" alt="hamburger icon" id="headerHamburger" />
      </div>
      <div id="headerPop">
        <ul>
          <li>Home</li>
          <li>Services</li>
          <li>become a driver</li>
          <li>About Us</li>
          <li>Contact US</li>
        </ul>
      </div>
      <div id="body">
        <section id="home">
          <div id="caption">Hire drivers with ease</div>
          <h1>Reliable Drivers for Your Car, Anytime, Anywhere.</h1>
        </section>
        <section id="services"></section>
        <section id="aboutUs"></section>
        <section id="contactUs"></section>
      </div>
    </div>
    <script src="./mobile.js"></script>
  </body>
</html>

Share Improve this question edited Nov 18, 2024 at 2:25 Naeem Akhtar 1,2741 gold badge12 silver badges23 bronze badges asked Nov 17, 2024 at 14:55 Minnu 336 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 2

You need to set z-index: 1 to #headerPop.

Also, you need to be careful when you're working with css positions.

function getBID(elementName) {
  return document.getElementById(elementName);
}

const driverImg = getBID("driverImg");
const namee = getBID("name");
const logoBox = getBID("logoBox");
const namedisc = getBID("namedisc");
const start = getBID("start");
const display = getBID("display");
const headerHamburger = getBID("headerHamburger");
const headerLogo = getBID("headerLogo");
const header = getBID("header");
const headerPopLi = document.querySelectorAll("#headerPop ul li");
const headerPop = getBID("headerPop");

driverImg.onload = function () {
  namee.style.fontSize = logoBox.offsetHeight / 2 + "px";
  driverImg.style.left = namee.offsetWidth + "px";
  logoBox.style.width = namee.offsetWidth + driverImg.offsetWidth + "px";
  logoBox.style.left = (start.offsetWidth - logoBox.offsetWidth) / 2 + "px";
  namedisc.style.width = namee.offsetWidth + "px";
  namedisc.style.top = namee.offsetHeight + "px";
};
function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function run() {
  await wait(3000);
  start.style.visibility = "hidden";
  display.style.visibility = "visible";
  headerHamburger.style.height = headerLogo.offsetHeight + "px";
  headerHamburger.style.top =
    (header.offsetHeight - headerHamburger.offsetHeight) / 2 + "px";
  const liHeight = headerPop.offsetHeight / 5;
  headerHamburger.onclick = function () {
    const d1 = window.getComputedStyle(headerPop).visibility;
    if (d1 == "visible") {
      headerPop.style.visibility = "hidden";
    } else {
      headerPop.style.visibility = "visible";
    }
  };
  headerPopLi.forEach((li) => {
    li.addEventListener("click", () => {});
    li.style.height = liHeight + "px";
    li.style.fontSize = liHeight / 2 + "px";
    if (li.innerHTML == "Home") {
      li.style.borderTop = "1px solid black";
    }
  });
}

run();

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#start {
  background-color: rgba(72, 188, 132, 0.425);
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#logoBox {
  position: absolute;
  height: 10%;
  top: 30%;
}
#name {
  position: absolute;
  color: rgb(72, 188, 132);
  margin: 0;
  top: 10%;
}
#driverImg {
  position: absolute;
  height: 80%;
  top: 10%;
}
#namedisc {
  font-family: "Courier New", Courier, monospace;
  position: absolute;
  color: rgb(72, 188, 132);
  text-align: center;
}

#display {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
}

#header {
  position: fixed;
  left: 0;
  top: 0;
  height: 10vh;
  width: 100%;
  background-color: rgba(72, 188, 132, 0.425);
}

#headerLogo {
  position: absolute;
  height: 70%;
  top: 30%;
  left: 15%;
}

#headerHamburger {
  position: absolute;
  right: 15%;
  filter: invert(1);
}

#headerPop {
  position: fixed;
  top: 10%;
  left: 0;
  height: 27%;
  width: 100%;
  text-align: center;
  background-color: white;
  visibility: hidden;
  z-index: 1;
}

#headerPop ul {
  margin: 0;
  padding: 0;
}

#headerPop ul li {
  font-family: "Courier New", Courier, monospace;
  font-weight: 800;
  color: black;
  align-content: center;
  border-bottom: 1px solid black;
}

#body {
  position: relative;
  top: 10vh;
  width: 100vw;
}

#home {
  position: relative;
  height: 80vh;
  width: 100vw;
}

#services {
  position: relative;
  height: 80vh;
  width: 100vw;
}

#caption {
  position: relative;
  margin: 3vh auto;
  width: 80vw;
  font-family: "Courier New", Courier, monospace;
  color: rgb(72, 188, 132);
  text-align: center;
  font-size: 2vh;
  font-weight: 800;
}

#home h1 {
  position: relative;
  margin: 3vh auto;
  width: 80vw;
  color: rgb(43, 43, 43);
  text-align: center;
  font-size: 3vh;
}

<div id="start">
  <div id="logoBox">
    <h1 id="name">Carnex</h1>
    <img src="./resources/driver.png" alt="driver icon" id="driverImg" />
    <h1 id="namedisc">Book Drivers</h1>
  </div>
</div>
<div id="display">
  <div id="header">
    <h1 id="headerLogo">LOGO HERE</h1>
    <img
      src="./resources/hamburger.png"
      alt="hamburger icon"
      id="headerHamburger"
    />
  </div>
  <div id="headerPop">
    <ul>
      <li>Home</li>
      <li>Services</li>
      <li>become a driver</li>
      <li>About Us</li>
      <li>Contact US</li>
    </ul>
  </div>
  <div id="body">
    <section id="home">
      <div id="caption">Hire drivers with ease</div>
      <h1>Reliable Drivers for Your Car, Anytime, Anywhere.</h1>
    </section>
    <section id="services"></section>
    <section id="aboutUs"></section>
    <section id="contactUs"></section>
  </div>
</div>

Hope, this helps.

Programmer puzzle solving

javascript - Solid color background is applying with some transparency - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)