Bootstrap navbar dropdown list hides behind html select option

Question

The problem is that I have a select option list in my body just below the bootstrap navbar, and the problem occur when I open select list and the hover over navbar to open its dropdwon, I have tried this solution but it didn't work for me.

.select-style {
    width: 100%;
    height: 40px;
    padding-left: 10px;
    background-image: url(/getmedia/f5d6e976-be64-4f97-b0bf-b4bb2c9ddf15/Dropdown.aspx);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 96% center;
}
.select-style {
    border: 1px solid #ececec;
    font-size: 15px;
    font-family: arialRegular;
}

give the header position and z-index. It would indeed work out! — Sonia, Jan 03 '18 at 10:23
@Sonia i have used the default bootstrap fixed top navbar, gave it position relative and z-index 9999 but it didn't work — Umer Farooq, Jan 03 '18 at 12:03

score 0 · Answer 1 · answered Jan 03 '18 at 10:27

0

you have to give navbar parent class z-index more than select and try to givr z-index in minus to select

answered Jan 03 '18 at 10:27

Lekhraj

455
4
9

score 0 · Answer 2 · answered Jan 03 '18 at 10:30

0

.select-style { 
  z-index:initial;
}

answered Jan 03 '18 at 10:30

Ganesh Putta

2,622
2
19
26

Bootstrap navbar dropdown list hides behind html select option

2 Answers2