CODEWITHSUNDEEP
htmlcssresponsive
DeveloperLV
DeveloperLV

Reputation: 1781

CSS responsive nav bar remove content behind when opened haburger

This is my HTML and CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
}

.row {
  max-width: 1140px;
  margin: 0 auto;
}

/* ------------ NAVIGATION ------------  */

.main-nav {
  float: right;
  list-style: none;
  margin-top: 40px;
}

.main-nav li {
  display: inline-block;
  margin-left: 40px;
}

.main-nav li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 90%;
}

.main-nav ul li a {
  position: relative;
  z-index: 1;
  padding: 15px;
}


.main-nav label #btn,
.main-nav label #cancel {
  font-size: 180%;
  cursor: pointer;
  float: right;
  margin-right: 40px;
  display: none;
}

.main-nav #check {
  display: none;
}

/* ------------ HEADER ------------  */

header {
  height: 100vh;
}

.landing {
  position: absolute;
  width: 1140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.landing p {
  margin-bottom: 15px;
}

h1 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 280%;
  font-weight: 300;
  word-spacing: 3px;
  letter-spacing: 1px;
}



/* ------------ BUTTONS ------------  */

.btn:link,
.btn:visited {
  display: inline-block;
  padding: 10px 30px;
  text-decoration: none;
  background-color: #0097e6;
  border-radius: 200px;
  color: #fff;
}

/* ------------ MEDIA QUERIES ------------  */
@media (max-width: 860px) {

  .main-nav label #btn {
    display: block;
  }
  .main-nav ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  .main-nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  .main-nav #check:checked ~ ul {
    left: 0;
  }
  .main-nav #check:checked ~ label #btn {
    display: none;
  }
  .main-nav #check:checked ~ label #cancel {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  </head>
  <body>


    <header>
      <div class="row">
        <div class="main-nav">
          <nav>
            <input type="checkbox" id="check">
            <label for="check">
              <i class="fas fa-bars" id="btn"></i>
              <i class="fas fa-times" id="cancel"></i>
            </label>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About me</a></li>
              <li><a href="#">Projects</a></li>
              <li><a href="#">Contact me</a></li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="landing">
        <h1>One</h1>
        <p>Two</p>
      </div>
    </header>

  </body>
</html>

Details

I have just finished creating a responsive navigation depending on the device width.

Problem

enter image description here

Here as you can see the navigation contents such as the li are showing along with the header content behind. Does not look good!

Question

What do I need to do - to blank out all content behind the navigation bar when I have opened the menu? So it shows the navigation bar only.

Upvotes: 0

Views: 34

Answers (2)

Chris
Chris

Reputation: 874

You can ether use JavaScript to change the display to non of the div you want to hide or make the background-color of the responsive color white so that it hides what ever is behind it.

Upvotes: 0

Ryan
Ryan

Reputation: 374

While there are a number of other aspects that should be improved, a simple solution for what I suspect you want would be to add these styles to your ul:

ul {
    position: relative; /* allows for z-index usage */
    z-index: 2; /* value higher than that of the content you want 'behind' */
    background-color: #fff; /* non-transparent background */
}

Upvotes: 1

Related Questions