Hero Image overlapping with Hamburger menu made from pure HTML & CSS

user_11977945 0
Viewed 102

What my problem is that i have followed a tutorial on how to make a hamburger menu with just CSS & HTML. I later made a hero image background to go on my website. However, when in mobile view to click the hamburger menu, the entire content of the HERO background covers the part of the hamburger menu that comes in to the HERO background area, thus making the hamburger menu functionally useless. I've tried looking for other solutions, and ive found two problems which is the same as mine, but not completely, and has not worked in solving the problem.

Here is the HTML Code:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>

  <!-- General Stylesheets -->

  <link rel="stylesheet" href="css/general_index.css">


  <!-- Stylesheet for mobile users -->

  <link rel="stylesheet" media="(hover: none)" href="css/mobile_nav.css">
  <link rel="stylesheet" media="(hover: none)" href="css/mobile_index_general.css">
  <!-- <link rel="stylesheet" meida="(hover: none)" href="css/test.css"> -->


  <!-- Stylesheet for desktop users -->

  <link rel="stylesheet" media="(hover: hover)" href="css/desktop_nav.css">
  <link rel="stylesheet" media="(hover: hover)" href="css/desktop_index_general.css">
  <style>
    #errorcode {
      color: red;
      font-size: 1.5em;
    }

    #success {
      color: green;
    }

    header {
      height: 5em;
      background-color: #b8241c;
    }
  </style>
</head>
<body>
  <header>
    <nav class="navbar">
      <div class="hamburger-menu navlinks">
        <input id="menu__toggle" type="checkbox" />
        <label class="menu__btn" for="menu__toggle">
          <span></span>
        </label>

        <ul class="menu__box">
          <li><a class="menu__item" href="#">Home</a></li>
          <li><a class="menu__item" href="#">About</a></li>
          <li><a class="menu__item" href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
  </header>
<main>

  <h1 class="mainTitle">Why Our Country Needs You!</h1>


  <div class="hero-image">
    <di class="hero-container">
      <h1><span>Freedom</span></h1>
      <span class="des"> TEST TEXT // EVEN MORE TEST</span>
      <a href="" class="btn">Help now!</a>
    </div>
  </div>

  <div class="container">
    <div class="titleOne"><h2>We are under a massive XXX XXX!</h2></div>
    <div class="titleTwo"><h2>The XXX is removing our only playing card!</h2></div>
    <div class="DescOne"><p>this is just some descriptive text for title 1 
    this is just some descriptive text for title 1 this is just some descriptive text for title 1
    this is just some descriptive text for title 1 this is just some descriptive text for title 1
    this is just some descriptive text for title 1 this is just some descriptive text for title 1
    this is just some descriptive text for title 1 this is just some descriptive text for title 1
    this is just some descriptive text for title 1 this is just some descriptive text for title 1
    this is just some descriptive text for title 1 this is just some descriptive text for title 1
    this is just some descriptive text for title 1 this is just some descriptive text for title 1
    </p></div>
    <div class="Desc2"><p>this is just some descriptive text for title 2
    this is just some descriptive text for title 2 this is just some descriptive text for title 2
    this is just some descriptive text for title 2 this is just some descriptive text for title 2
    this is just some descriptive text for title 2 this is just some descriptive text for title 2
    this is just some descriptive text for title 2 this is just some descriptive text for title 2
    this is just some descriptive text for title 2 this is just some descriptive text for title 2
    this is just some descriptive text for title 2 this is just some descriptive text for title 2
    this is just some descriptive text for title 2 this is just some descriptive text for title 2
    this is just some descriptive text for title 2 this is just some descriptive text for title 2
    </p></div>
  </div>

</main>
 <footer>

</footer>
</body>
</html>

Here is the CSS for the hamburger menu(hamburger menu and hero image is seperate files).

#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}
.menu__box {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  transition-duration: .25s;
}
.menu__item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}
.menu__item:hover {
  background-color: #CFD8DC;
}

body {
  margin: 0;
}

Here is the CSS for the HERO background:

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f1f1f1;
  font-family: sans-serif;
}

.hero-image {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: url(../images/famine.png) no-repeat center;
  background-size: cover;
}

.hero-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
}

.hero-container h1 {
  font-size: 2.5em;
  letter-spacing: 0.2em;
  margin: 0;
}

.hero-container h1 span {
  border: 10px solid white;
  padding: 6px 14px;
  display: inline-block;
}

.des {
  margin: 20px;
  display: block;
  font-size: 1.6em;
  text-shadow: 0 0 10px black;
}

.btn {
  color: #313131;
  padding: 10px 24px;
  font-size: 1.25em;
  text-decoration: none;
  background: #f1f1f1;
  border-radius: 8px;
  transition: 0.3s all;
}
.btn:hover {
  opacity: 0.8;
}

The optimal solution for me would be so when the hamburger menu activates it is not hidden under any of the content of the hero image.

Website before hamburger menu activated: image before hamburger

Website after hamburger menu activated: image after hamburger

css html
2 Answers

If I understand your issue correctly, I would recommend you to set the z-index: value for your .menu__box to something like 99, so your CSS for the .menu__box should look like this:

.menu__box {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  transition-duration: .25s;
  z-index: 99;
}

(You can see the z-index at the bottom of the above CSS)

This will tell the browser to render your .menu__box above everything else on the site. Just make sure that your background image doesn't have a higher z-index value than your menu, but that shouldn't be the case.

user_185460130

try this .

.menu__box {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  transition-duration: .25s;
  z-index: 1;
}

You can skip hamburger-menu z-index if menu-box z-index works

.hamburger-menu {
  z-index:1
}

Add lower z-index to image div

.hero-image {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: url(../images/famine.png) no-repeat center;
  background-size: cover;
  z-index:-1;

}

Try this and tell if it works. Thank you

user_168350480
Related