Question 205763 in Html Question posted in
Some basic documentation can be found here.

Html – why is the drop down menu is overlapping with the text?

I’m using bootstrap classes and I don’t know why is the The drop down menu is overlaping with the text
enter image description here

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul id="nav-list" class="nav navbar-nav navbar-right d-block d-sm-none row">
                <li class="li-Menu text-center">Chiken</li ><hr">
                <li class="li-Menu text-center">Beef</li><hr">
                <li class="li-Menu text-center">Sushi</li>
            </ul>
          </div>```


There was a me-auto class , I removed it and I searched more and there seem to be no answer
Tags:

2

Answers


  1. 0

    Yes
    And that is very easy to fix

    Add the following css code to your css

    #navbarSupportedContent {z-index:99;}

    Or if you prefer using the classname

    .collapse {z-index:99;}

    This will make the drop-down be more important and display on top when opening it

    Edit: try the following:

    <div class="collapse navbar-collapse" id="navbarSupportedContent" tabindex=”0” style=”z-index:10;”>
    Login or Signup to reply.
  2. 0

    Fixing this is simple. Your navabar dropdown is below the elements. If you add .collapse { z-index: 1000; } it will be displayed above the other elements.

    You should also do .collapse { background-color: white } to make sure you don’t see anything below it.

    If you want it to move elements under it so that you can see them, add this: .collapse { display: block } If those elements are absolutely positioned, then I don’t really know how to move them.

    Edit: @Marcus Petersen asked me to add the code for it to work, so here it is.

    CODE:

    var opened = false;
function openclose() {
    if (opened == true) {
        document.getElementById("openclose").innerHTML = "[Click] Open";
        document.getElementById("collapse").style.height = "0%";
        opened = false;
    } else {
        document.getElementById("openclose").innerHTML = "[Click] Close";
        document.getElementById("collapse").style.height = "250px";
        opened = true;
    }
}
    .collapseable {
    width: 100%;
}
.menu {
    width: 100%;
}
.collapseable p {
    text-align: center;
}
.collapseable {
    position: absolute; /* Change to block to move the stuff below it down */
    height: 0%;
    overflow-y: clip;
    background-color: white;
    z-index: 1000;
    transition: height 0.5s linear;
}
    <html>
  <nav>
      <button class="menu" onclick="openclose()">
          <span>Menu</span>
          <br>
          <span id="openclose">[Click] Open</span>
      </button>
      <div class="collapseable" id="collapse">
          <p>Menu Item 1</p>
          <hr>
          <p>Menu Item 2</p>
          <hr>
          <p>Menu Item 3</p>
      </div>
  </nav>
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet (and then more lorem)</p>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search