Fixed navbar falls behind content

html css navbar fixed

11,208

Solution 1

Add z-index: 9; to nav

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: #fff;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
nav {
  background-color: #fff;
  height: 40px;
  position: fixed;
  top: 0;
  width: 100%;
  float: left;
  z-index: 9;
}
nav .links {
  float: left;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}
nav .links a {
  color: #000;
  text-decoration: none;
  margin-right: 10px;
  transition: .15s;
}
nav .links a:hover {
  opacity: 0.6;
  transition: .15s;
}
nav .name {
  float: right;
  margin-top: 10px;
}
nav .name a {
  color: #000;
  text-decoration: none;
}
nav .name a h2 {
  font-size: 14px;
  margin: 0;
}
.work {
  font-size: 0;
  padding-top: 40px;
  overflow: hidden;
}
.work img {
  max-width: 20%;
  transition: .15s;
}
.work img:hover {
  opacity: .8;
  transition: .15s;
}

<nav>

  <div class="container">

    <div class="links">

      <a href="#">WORK</a>
      <a href="#">ABOUT</a>
      <a href="#">DRIBBBLE</a>
      <a href="#">BEHANCE</a>
      <a href="#">BLOG</a>
      <a href="#">CONTACT</a>

    </div>

    <div class="name">

      <a href="#"><h2>Tom Walsh</h2></a>

    </div>

  </div>

</nav>

<div class="work">

  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>

</div>

Solution 2

Add this style

.links{z-index:1}

11,208

Author by

Tom Walsh

Updated on June 05, 2022

Comments

Tom Walsh almost 2 years

I have a fixed navbar here.

The problem is that when you scroll down, if you then hover over an element that is essentially behind the navbar, it becomes ontop of the nav bar?

Very strange?

Any advice?

CSS:

    html, body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #fff; }

    .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; }

    nav {
    background-color: #fff;
    height: 40px;
    position: fixed;
    top: 0;
    width: 100%;
    float: left; }
    nav .links {
    float: left;
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px; }
    nav .links a {
    color: #000;
    text-decoration: none;
    margin-right: 10px;
    transition: .15s; }
    nav .links a:hover {
    opacity: 0.6;
    transition: .15s; }
    nav .name {
    float: right;
    margin-top: 10px; }
    nav .name a {
    color: #000;
    text-decoration: none; }
    nav .name a h2 {
    font-size: 14px;
    margin: 0; }

    .work {
    font-size: 0;
    padding-top: 40px;
    overflow: hidden; }
    .work img {
    max-width: 20%;
    transition: .15s; }
    .work img:hover {
    opacity: .8;
    transition: .15s; }

JSFiddle: http://jsfiddle.net/2c53e1eg/

w3debugger almost 9 years

Good approach, but It will be great if we set it to nav. Maybe he add some other elements with position: relative; and problem will remain same :)
w3debugger almost 9 years

@TomWalsh Most welcome, As you are new here, Please take a short look at meta.stackexchange.com/questions/5234/… :)