CODEWITHSUNDEEP
htmlcssz-index
sidekickbottom
sidekickbottom

Reputation: 139

Content goes over top of fixed navbar despite z-index

I want the content to go beneath the fixed navbar, but it goes over the top of it. I cant figure out how to do this.

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 5px -7px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.logo {
  align-self: flex-start;
  padding: 0px 10px;
}

.logoutbutton {
  align-self: flex-end;
  margin: auto 30px;
  padding: 5px 10px;
  background: none;
  outline: none;
  border: 1px solid;
  border-radius: 2px;
  transition: 0.2s all;
}

.logoutbutton:hover {
  background: #eeeeee;
}

.layout-wrapper {
  display: flex;
  position: relative;
  top: 56px;
}

.left-navigation-drawer {
  display: block;
  position: fixed;
  height: 100vh;
  width: 270px;
  line-height: 50px;
  box-shadow: 5px 0px 5px -7px;
}

.left-navigation-drawer a {
  text-decoration: none;
  max-width: 100%;
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  padding-left: 20px;
}

.left-navigation-drawer a:hover {
  background-color: lemonchiffon;
}

.main-content {
  position: relative;
  left: 270px;
  padding-left: 50px;
}
<body>
  <div class="navbar">
    <div class="logo">
      <h3>MyWebsite</h3>
    </div>
    <input class="logoutbutton" type="submit" value="Logout">
  </div>
  <div class="layout-wrapper">
    <div style="padding-top: 20px;" class="left-navigation-drawer">
      <nav>
        <a href=""><span><i style="font-size:18px;" class="fas fa-keyboard"></i></span>&nbsp;&nbsp; Content</a>
        <a href=""><span><i style="font-size:18px;" class="fas fa-info-circle"></i></span>&nbsp;&nbsp; Account Details</a>
        <a href=""><span><i style="font-size:18px;" class="fas fa-user-cog"></i></span>&nbsp;&nbsp; Account Settings</a>
      </nav>
    </div>

    <div class="main-content">
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>

    </div>
  </div>

</body>

</html>

Upvotes: 2

Views: 3115

Answers (1)

Sumit Patel
Sumit Patel

Reputation: 4638

Everything in your code is good you need to add background color to your header.

As that element is transparent so when you scroll its goes under but due to no background it seems its goes from top.

update following css add background color.

.navbar{
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 5px -7px;
  position: fixed;
  top:0;
  width: 100%;
  z-index: 1000;
  background:#fff;
}


body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 5px 5px -7px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
}

.logo {
  align-self: flex-start;
  padding: 0px 10px;
}

.logoutbutton {
  align-self: flex-end;
  margin: auto 30px;
  padding: 5px 10px;
  background: none;
  outline: none;
  border: 1px solid;
  border-radius: 2px;
  transition: 0.2s all;
}

.logoutbutton:hover {
  background: #eeeeee;
}

.layout-wrapper {
  display: flex;
  position: relative;
  top: 56px;
}

.left-navigation-drawer {
  display: block;
  position: fixed;
  height: 100vh;
  width: 270px;
  line-height: 50px;
  box-shadow: 5px 0px 5px -7px;
}

.left-navigation-drawer a {
  text-decoration: none;
  max-width: 100%;
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  padding-left: 20px;
}

.left-navigation-drawer a:hover {
  background-color: lemonchiffon;
}

.main-content {
  position: relative;
  left: 270px;
  padding-left: 50px;
}
<body>
  <div class="navbar">
    <div class="logo">
      <h3>MyWebsite</h3>
    </div>
    <input class="logoutbutton" type="submit" value="Logout">
  </div>
  <div class="layout-wrapper">
    <div style="padding-top: 20px;" class="left-navigation-drawer">
      <nav>
        <a href=""><span><i style="font-size:18px;" class="fas fa-keyboard"></i></span>&nbsp;&nbsp; Content</a>
        <a href=""><span><i style="font-size:18px;" class="fas fa-info-circle"></i></span>&nbsp;&nbsp; Account Details</a>
        <a href=""><span><i style="font-size:18px;" class="fas fa-user-cog"></i></span>&nbsp;&nbsp; Account Settings</a>
      </nav>
    </div>

    <div class="main-content">
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>

    </div>
  </div>

</body>

</html>

Upvotes: 3

Related Questions