CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Liz
Liz

Reputation: 1457

Bootstrap Dropdown Partially Blocked Behind Page Content

I have altered my Bootstrap dropdown in two ways:

The dropdown functionality is working properly, but when you mouse down the dropdown's lis the dropdown disappears when you get to the 2nd or third item. As far as I can tell, this happens regardless of the content on the page below it.

I'm not sure where the problem is coming from, as I've checked any CSS instances of z-index.

You can see the dropdown issue live here when you hover over the menu item for "Tools". I would paste HTML and/or CSS here, but I'm really not sure where the problem lies, so I'd be putting up an extravagant amount of code and/or guessing....

Upvotes: 0

Views: 155

Answers (2)

Amal
Amal

Reputation: 3426

Hope this helps

Replace below css

* {
    font-family: "Raleway", sans-serif;
    color: #333232;
    position: relative;
    z-index: 10;
}

with

* {
    font-family: "Raleway", sans-serif;
    color: #333232;
    position: relative;
}

just remove z-index for all elements,i think you have set z-index for individual elements.Then no need to set for all elements.

Upvotes: 1

Andrew
Andrew

Reputation: 375

This might point you in the right direction or help debug anyway - see attached screenshot. Looks like it has to do with the height of your .row element which wraps the header. If you increase the height you can see the menu persists as you mouse over all elements in it. enter image description here

If you are triggering the show/hide visibility with the .row element, it makes sense that as your mouse moves off it, the menu is hidden again. If you need further help, please provide the JavaScript and CSS you're using to trigger the interaction.

Upvotes: 0

Related Questions