Html Question posted in
Some basic documentation can be found here.

Stop the header image from overlapping the nav bar using only html and css?

The navigation bar is lower too and the image is just there

Is there any way to fix this without JavaScript? I can only use
css and html

Also the z-index doesn’t seem to work?

For more context it doesn’t look like that when I don’t put the header image

With

with header image

Without header image

* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

body {
  font-family: 'Roboto', sans-serif;
}

.sidebar {
  z-index: 999;
}

.sidebar {
  position: fixed;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #042331;
  transition: all .5s ease;
}

.sidebar header {
  font-size: 22px;
  color: white;
  line-height: 70px;
  text-align: center;
  background: #063146;
  user-select: none;
}

.sidebar ul a {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color: white;
  padding-left: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid black;
  border-top: 1px solid rgba(255, 255, 255, .1);
  transition: .4s;
}

ul li:hover a {
  padding-left: 50px;
}

.sidebar ul a i {
  margin-right: 16px;
}

#check {
  display: none;
}

label #btn,
label #cancel {
  position: absolute;
  background: #042331;
  border-radius: 3px;
  cursor: pointer;
}

label #btn {
  left: 40px;
  top: 25px;
  font-size: 35px;
  color: white;
  padding: 6px 12px;
  transition: all .5s;
}

label #cancel {
  z-index: 1111;
  left: -195px;
  top: 17px;
  font-size: 30px;
  color: #0a5275;
  padding: 4px 9px;
  transition: all .5s ease;
}

#check:checked~.sidebar {
  left: 0;
}

#check:checked~label #btn {
  left: 250px;
  opacity: 0;
  pointer-events: none;
}

#check:checked~label #cancel {
  left: 195px;
}

#check:checked~section {
  margin-left: 250px;
}

section {
  background: url(bg.jpeg) no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  transition: all .5s;
}

/*  */
.header-image {
  background-image: url("https://images.genius.com/6c7454cd6e21bb1afb97a818253f4ef2.1000x1000x1.png");
  height: 300px;
  background-position: center;
  background-size: cover;

}
<link rel="stylesheet" href="ii.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="header-image">
</div>

<body>
  <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>
  <div class="sidebar">
    <header>help</header>
    <ul>
      <li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
      <li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
      <li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
      <li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
      <li><a href="#"><i class="far fa-question-circle"></i>About</a></li>
      <li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
      <li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>
    </ul>
  </div>
  <section></section>
Tags:

2

Answers


  1. 0

    Setting the sidebar class’s top property to 0 seems to solve the issue.

    .sidebar {
  top: 0; /* Like so */
  position: fixed;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #042331;
  transition: all .5s ease;
}
    Login or Signup to reply.
  2. 0

    You have to add top: 0 in sidebar which will solve the header and image issue also add one more thing which is position: fixed to #check:checked~label #cancel so that your close button does not gets scroll with content instead stays with sidebar. Below is working example.

    * {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

body {
  font-family: 'Roboto', sans-serif;
}

.sidebar {
  z-index: 999;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #042331;
  transition: all .5s ease;
}

.sidebar header {
  font-size: 22px;
  color: white;
  line-height: 70px;
  text-align: center;
  background: #063146;
  user-select: none;
}

.sidebar ul a {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color: white;
  padding-left: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid black;
  border-top: 1px solid rgba(255, 255, 255, .1);
  transition: .4s;
}

ul li:hover a {
  padding-left: 50px;
}

.sidebar ul a i {
  margin-right: 16px;
}

#check {
  display: none;
}

label #btn,
label #cancel {
  position: absolute;
  background: #042331;
  border-radius: 3px;
  cursor: pointer;
}

label #btn {
  left: 40px;
  top: 25px;
  font-size: 35px;
  color: white;
  padding: 6px 12px;
  transition: all .5s;
}

label #cancel {
  z-index: 1111;
  left: -195px;
  top: 17px;
  font-size: 30px;
  color: #0a5275;
  padding: 4px 9px;
  transition: all .5s ease;
}

#check:checked~.sidebar {
  left: 0;
}

#check:checked~label #btn {
  left: 250px;
  opacity: 0;
  pointer-events: none;
}

#check:checked~label #cancel {
  position: fixed;
  left: 195px;
}

#check:checked~section {
  margin-left: 250px;
}

section {
  background: url(bg.jpeg) no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  transition: all .5s;
}

/*  */
.header-image {
  background-image: url("https://images.genius.com/6c7454cd6e21bb1afb97a818253f4ef2.1000x1000x1.png");
  height: 300px;
  background-position: center;
  background-size: cover;

}
    <div class="header-image">
</div>


<input type="checkbox" id="check">
<label for="check">
      <i class="fas fa-bars" id="btn">Open</i>
      <i class="fas fa-times" id="cancel">Close</i>
    </label>
<div class="sidebar">
  <header>help</header>
  <ul>
    <li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>
    <li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>
    <li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>
    <li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>
    <li><a href="#"><i class="far fa-question-circle"></i>About</a></li>
    <li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>
    <li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>
  </ul>
</div>
<section></section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search