Menu bar with position fixed not working

Question

Menu bar is fixed on the top of the page while scrolling down. However, it is weird that while scrolling down, the menu bar goes under other div so I cannot click the menu.

 #cssmenu { position: fixed; left: 0; top: 0; height: 40px; width: 100%; background-color: #E6E6E4; } .row { margin: 0 auto; width: 100%; height: 400px; } .col-sm-4 { height: 100%; border: 1px solid black; } 

 <div id='cssmenu'> <ul class="menubar"> <li><a href="#" class="btn btn-sm">Please</a></li> <li><a href="#" class="btn btn-sm">Fix</a></li> <li><a href="#" class="btn btn-sm">This</a></li> <li><a href="#" class="btn btn-sm">Problem</a></li> </ul> </div> <div class="container-fluid"> <div class='row'> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-4"></div> </div> </div> 

This is the HTML code.

It is weird that it works well with other div that are not using those classes(container-fluid and row). Please help me to fix this prlbem.

Answer 1

See the code it is completely fine.

 #cssmenu { position: fixed; left: 0; top: 0; height: 40px; width: 100%; background-color: #E6E6E4; } #cssmenu ul li{ display: inline; margin-right: 20px; } .row{ margin:0 auto; width: 100%; height: 400px; } .col-sm-4{ height: 100%; border: 1px solid black; } 

 <div id='cssmenu'> <ul class = "menubar"> <li><a href = "#" class = "btn btn-sm">Please</a></li> <li><a href = "#" class = "btn btn-sm">Fix</a></li> <li><a href = "#" class = "btn btn-sm">This</a></li> <li><a href = "#" class = "btn btn-sm">Problem</a></li> </ul> </div> <div class="container-fluid"> <div class = 'row'> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-4"></div> </div> </div> 

Codepen: https://codepen.io/Omi236/pen/gRZYQZ?editors=1100

Answer 2

Add z-index to #cssmenu to make link clickable as below,

The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other.

#cssmenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #E6E6E4;
  z-index:9;/*Add this*/
}

 #cssmenu { position: fixed; left: 0; top: 0; height: 40px; width: 100%; background-color: #E6E6E4; z-index: 9; } .row { margin: 0 auto; width: 100%; height: 400px; } .col-sm-4 { height: 100%; border: 1px solid black; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id='cssmenu'> <ul class="menubar"> <li><a href="#" class="btn btn-sm">Please</a></li> <li><a href="#" class="btn btn-sm">Fix</a></li> <li><a href="#" class="btn btn-sm">This</a></li> <li><a href="#" class="btn btn-sm">Problem</a></li> </ul> </div> <div class="container-fluid"> <div class='row'> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-4"></div> </div> </div> 

Answer 3

Try this. Hope you got the solution

 #cssmenu { position: fixed; left: 0; top: 0; height: 40px; width: 100%; background-color: #E6E6E4; } .menubar{float:left;padding:0;margin:0;} .menubar li{display:inline-block;float:left;} .menubar li a{padding:10px;text-decoration:none;display:block;} .row { margin: 0 auto; width: 100%; height: 400px; } .col-sm-4 { height: 100%; border: 1px solid black; } 

 <div id='cssmenu'> <ul class="menubar"> <li><a href="#" class="btn btn-sm">Please</a></li> <li><a href="#" class="btn btn-sm">Fix</a></li> <li><a href="#" class="btn btn-sm">This</a></li> <li><a href="#" class="btn btn-sm">Problem</a></li> </ul> </div> <div class="container-fluid"> <div class='row'> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-4"></div> </div> </div>