Fixed top nav doesn't overlay page content

Question

I'm trying to create a top-fixed nav, which is supposed to always be visible and overlay content if needed. However, after several attempts I've got the following result. I'd like to get rid of this "transparency" effect on the navbar.

@import url("https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,800|Poppins");
.nav-title {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
}

#mobile-nav {
  height: 3.8rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  box-shadow: 0px 1px 10px black;
}
#mobile-nav i {
  font-size: 3rem;
}

#content {
  margin-top: 4rem;
}

#start {
  height: 50vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}
#start h1 {
  position: relative;
  top: 25%;
  font-size: 2.3rem;
  margin: 0 1rem;
}

#info {
  height: 100vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  margin: 0 auto;
  text-align: c;
}
#info p {
  margin: 0 50px;
}
#info h2 {
  text-align: center;
}

.fixed-top {
  position: fixed;
  top: 0;
}

<header>
  <nav id="mobile-nav" class="fixed-top">
    <div class="nav-title">Some logo</div>
    <i class="material-icons">menu</i>
  </nav>
</header>

<div id="content">
  <section id="start">
    <h1>This is an<br />awesome header.</h1>
  </section>
  <section id="info">
    <h2>And this is another header.</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nibh vel eros porttitor semper. Sed sit amet porttitor velit, sed malesuada orci. Nam nec gravida quam. Proin eget tristique quam. Nam posuere massa magna. Aenean congue
      sed enim id tempus. Etiam sed est in arcu facilisis auctor sit amet nec eros. Duis cursus molestie quam, quis blandit ex eleifend vitae. Quisque efficitur leo at magna ornare, vitae aliquam ante interdum. Nullam eget consectetur arcu. Suspendisse
      sit amet tincidunt dui, sit amet placerat nunc. Sed posuere, lacus quis pellentesque interdum, dui nulla molestie est, vel condimentum enim quam in ex.</p>

So far I've tried z-index and adding margin-top to the content div but this didn't make a trick. What am I doing wrong and how can I fix it? Is there any specific things about position fixed?

Answer 1

You need to give it a background-color if you want it opaque. Also, because it's before the rest of content, when they overlap the rest will be above it. To bring it above, give it z-index: 1;

.fixed-top {
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 1
}

---

Another way of doing it would be to move the scrollbar from body to #content, which would no longer allow them to overlap (in which case you no longer need the above). It also has the advantage of not having the scrollbar rendered on top of the menu:

#content {
  margin-top: 4rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

Finally, you should prevent the top bar from exceeding document's width by telling it to include the padding in its total width calculation:

#mobile-nav {
  box-sizing: border-box;
}

See it here: https://codepen.io/andrei-gheorghiu/pen/KbbmmG

Answer 2

I think that background-color property is what you're looking for.

You may try to add following lines into #mobile-nav:

  background-color: white;
  z-index: 100; // or any other huge value

Answer 3

I added a background color to your nav and set a z-index higher than your content and headers.

@import url("https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,800|Poppins");
.nav-title {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
}

#mobile-nav {
  height: 3.8rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  box-shadow: 0px 1px 10px black;
  background-color:#ffffff;
}
#mobile-nav i {
  font-size: 3rem;
}

#content {
  margin-top: 4rem;
}

#start {
  height: 50vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}
#start h1 {
  position: relative;
  top: 25%;
  font-size: 2.3rem;
  margin: 0 1rem;
  z-index:90;
}

#info {
  height: 100vh;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  margin: 0 auto;
  text-align: c;
}
#info p {
  margin: 0 50px;
}
#info h2 {
  text-align: center;
}

.fixed-top {
  position: fixed;
  z-index:100;
  top: 0;
}

<header>
  <nav id="mobile-nav" class="fixed-top">
    <div class="nav-title">Some logo</div>
    <i class="material-icons">menu</i>
  </nav>
</header>

<div id="content">
  <section id="start">
    <h1>This is an<br />awesome header.</h1>
  </section>
  <section id="info">
    <h2>And this is another header.</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum nibh vel eros porttitor semper. Sed sit amet porttitor velit, sed malesuada orci. Nam nec gravida quam. Proin eget tristique quam. Nam posuere massa magna. Aenean congue
      sed enim id tempus. Etiam sed est in arcu facilisis auctor sit amet nec eros. Duis cursus molestie quam, quis blandit ex eleifend vitae. Quisque efficitur leo at magna ornare, vitae aliquam ante interdum. Nullam eget consectetur arcu. Suspendisse
      sit amet tincidunt dui, sit amet placerat nunc. Sed posuere, lacus quis pellentesque interdum, dui nulla molestie est, vel condimentum enim quam in ex.</p>