position: fixed not working html. how to fix?

Question

I found some good HTML code from StackOverflow and I am trying to modify them to a website, and my problem is the top menu bar isn't fixed even tho I've added position: fix -

window.onscroll = function() {
  changeOnScroll()
};

function changeOnScroll() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("Bar").style.width = scrolled + "%";
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.topmenu {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.topmenu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topmenu a:hover {
  background: #ddd;
  color: black;
}

.main {
  margin-top: 50px;
}

.header {
  position: fixed;
  top: 40px;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

.bg-image {
  background-image: url("https://th.bing.com/th/id/OIP.5iMThpltwKo127uM2r1UsAHaDt?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image1 {
  background-image: url("https://th.bing.com/th/id/OIP.IOe7MAzj_i96H8E7zbEhMAHaD6?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image2 {
  background-image: url("https://th.bing.com/th/id/OIP.3of4QJ65oynrDrNpgHYXTgHaD4?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-text {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text1 {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text2 {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

<div class="topmenu">
  <a href="#home">Home</a>
  <a href="#code">Gallery</a>
  <a href="#us">About</a>
</div>



<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="Bar"></div>
  </div>
</div>


<div class='main'></div>
<div class="bg-image"></div>

<div class="bg-text">
  <h2>html</h2>
  <h1>language</h1>
  <p>This is html</p>
</div>

<div class="bg-image1"></div>
<div class="bg-text1">
  <h2>css</h2>
  <h1>language</h1>
  <p>This is css</p>
</div>

<div class="bg-image2"></div>
<div class="bg-text2">
  <h2>js</h2>
  <h1>language</h1>
  <p>This is js </p>
</div>

What's wrong here? if you run this, when you scroll the position of menu top bar isn't fixed even tho it is fixed in the code. is there a way to fix this?

Answer 1

Add z-index to .top-menu

.topmenu {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
 z-index: 999;
}

window.onscroll = function() {
  changeOnScroll()
};

function changeOnScroll() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("Bar").style.width = scrolled + "%";
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.topmenu {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
 z-index: 999;
}

.topmenu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topmenu a:hover {
  background: #ddd;
  color: black;
}

.main {
  margin-top: 50px;
}

.header {
  position: fixed;
  top: 40px;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

.bg-image {
  background-image: url("https://th.bing.com/th/id/OIP.5iMThpltwKo127uM2r1UsAHaDt?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image1 {
  background-image: url("https://th.bing.com/th/id/OIP.IOe7MAzj_i96H8E7zbEhMAHaD6?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image2 {
  background-image: url("https://th.bing.com/th/id/OIP.3of4QJ65oynrDrNpgHYXTgHaD4?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-text {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text1 {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text2 {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

<div class="topmenu">
  <a href="#home">Home</a>
  <a href="#code">Gallery</a>
  <a href="#us">About</a>
</div>



<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="Bar"></div>
  </div>
</div>


<div class='main'></div>
<div class="bg-image"></div>

<div class="bg-text">
  <h2>html</h2>
  <h1>language</h1>
  <p>This is html</p>
</div>

<div class="bg-image1"></div>
<div class="bg-text1">
  <h2>css</h2>
  <h1>language</h1>
  <p>This is css</p>
</div>

<div class="bg-image2"></div>
<div class="bg-text2">
  <h2>js</h2>
  <h1>language</h1>
  <p>This is js </p>
</div>

Answer 2

Add a z-index to your .topbar

.topmenu {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999; /* This one was added */
}

and change the height of the header to 45px

.header {
  position: fixed;
  top: 45px; /* This was changed */
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

This would be your code:

window.onscroll = function() {
  changeOnScroll()
};

function changeOnScroll() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("Bar").style.width = scrolled + "%";
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.topmenu {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.topmenu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topmenu a:hover {
  background: #ddd;
  color: black;
}

.main {
  margin-top: 50px;
}

.header {
  position: fixed;
  top: 45px;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

.bg-image {
  background-image: url("https://th.bing.com/th/id/OIP.5iMThpltwKo127uM2r1UsAHaDt?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image1 {
  background-image: url("https://th.bing.com/th/id/OIP.IOe7MAzj_i96H8E7zbEhMAHaD6?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image2 {
  background-image: url("https://th.bing.com/th/id/OIP.3of4QJ65oynrDrNpgHYXTgHaD4?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-text {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text1 {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text2 {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

<div class="topmenu">
  <a href="#home">Home</a>
  <a href="#code">Gallery</a>
  <a href="#us">About</a>
</div>



<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="Bar"></div>
  </div>
</div>


<div class='main'></div>
<div class="bg-image"></div>

<div class="bg-text">
  <h2>html</h2>
  <h1>language</h1>
  <p>This is html</p>
</div>

<div class="bg-image1"></div>
<div class="bg-text1">
  <h2>css</h2>
  <h1>language</h1>
  <p>This is css</p>
</div>

<div class="bg-image2"></div>
<div class="bg-text2">
  <h2>js</h2>
  <h1>language</h1>
  <p>This is js </p>
</div>