CODEWITHSUNDEEP
htmlcss
Alessio Corvaglia
Alessio Corvaglia

Reputation: 33

Z-index button not clickable

I'm getting annoyed with a little problem. When I modify the z-index css attribute of my buttons (beacuse on scroll they overlaps on my top navbar and footer) they are not clickable yes, like there is something onto the button. How can I solve this problem?

This is my button:

<button class="btn waves-effect waves-light"><i class="small material-icons">add</i></button>

This is the CSS:

.waves-effect {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 0;
transition: .3s ease-out;
}
materialize3.css:5259
.btn, .btn-large {
text-decoration: none;
color: #fff;
background-color: #0091ea;
text-align: center;
letter-spacing: .5px;
transition: .2s ease-out;
cursor: pointer;
margin-left: 5px;
}
materialize3.css:5241
.btn, .btn-large, .btn-floating, .btn-large, .btn-flat {
font-size: 1rem;
outline: 0;
}
materialize3.css:5187
.btn, .btn-large, .btn-flat {
border: none;
border-radius: 2px;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 2rem;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;

Upvotes: 0

Views: 3308

Answers (1)

Chetan Kalra
Chetan Kalra

Reputation: 140

You might be trying to give a negative value to the z-index, causing other divs to overlap the button and make it unclickable. Instead, try giving a positive value (greater than the z-index value of the button) to the navbar and footer.

Not sufficient code to debug. Describe your problem with a working model and you might get your issue resolved.

Upvotes: 1

Related Questions