Menu bar with position fixed not working

sticky navigation bar on scroll
navbar fixed-top not working
css fixed menu after scroll
position: fixed not working on mobile
position: fixed not working in chrome
fixed navbar
nav bar always on top
css fixed header scrolling body

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>

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>

position fixed is not working, hidden behind the header/footer. You can remove the height as well and let the browser decide based on the content. Step 2) Add CSS: To create a fixed top menu, use position:fixed and top:0.Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.

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>

How To Create a Fixed Menu, How do I fix the top of my navigation bar? The menu is always visible, fixed on the top. No hamburger icon needed to hide it. These breakpoints also modifies the appearance of the back top top button and the right dot navigation (removed on phone size). But will only work in short menus, 4 items in the example.

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>

position responsive fixed button to div container css, (to the content) that is equal or larger than the height of your menu. 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.

How to Create Fixed Header or Footer Using CSS, in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly. Okay so I looked through past issues and I did find quite a few issues on affix plugin and scrolling glitches but none seems to fit this case, so if I&#39;m wrong thanks for pointing the solution t

Menu bar with position fixed not working, 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  nagging-menu is a jQuery plugin that allows you to create a floating and fixed position top menu bar on your webpage. The floating menu bar is invisible until you scroll down and then it appears. If you're looking for a simple fixed top menu bar without using jQuery, please check out our another article Sticky Top Menu Bar with CSS3 .

Problem with position fixed property - HTML-CSS, When I try to put nav bar on top by giving header position: fixed property ,‚Äčeverything sucks :frowning: leebut August 1, 2019, 11:16am #2. Hello, I'd like to add a fixed/sticky navigation bar to the Debut theme. I've seen plenty of similar questions but none with code specific to the Debut theme. Please let me know which file to modify and what code to add. Also, if I want to customize the CSS of section padding and buttons etc where

Comments
  • Thank you. It works. One more problem is that the menu bar now blocks the top of the container-fluid div. I want it to be placed right below the menu bar. Do you have an idea without setting "margin-top" for the container-fluid div?
  • Welcome @dsoup2 and no you have to use margin-top of same value as of it menu-bar, as it's position is fixed so you need to use margin-top in div below that. Do accept if it works.
  • lol I didn't know how to accept the answer until I pressed the check mark for curiosity. Thank you~
  • If you have specified z-index for other divs then assign heigher z-index to the menubar.