Menu icon Foundation
Button not working! What gives?

I am not sure how I could break such a simple function.  I had two buttons inside of a <section> container, but they did not work.  I was able to move one outside of the container and it works fine.  The other button is anchored to the bottom of the section, so I cannot move it out of the container.  It just doesn't make any sense to me why it isn't functioning as a button; no mouseover, not pointer, no link.

Here is the codepen link: https://codepen.io/mdbarthel/pen/VpQEer

Please keep in mind that I am new to Foundation (only took the first class so far).  This may be a common mistake for rookies, but I couldn't find a solution.  Any help would be appreciated.

buttonfoundation 6

I am not sure how I could break such a simple function.  I had two buttons inside of a <section> container, but they did not work.  I was able to move one outside of the container and it works fine.  The other button is anchored to the bottom of the section, so I cannot move it out of the container.  It just doesn't make any sense to me why it isn't functioning as a button; no mouseover, not pointer, no link.

Here is the codepen link: https://codepen.io/mdbarthel/pen/VpQEer

Please keep in mind that I am new to Foundation (only took the first class so far).  This may be a common mistake for rookies, but I couldn't find a solution.  Any help would be appreciated.

Rafi Benkual over 2 years ago

It's definitely a z-index issue. z-index should build up from a parent that starts at 0, then the the things that lay above should be 1+

 

I updated your example here: https://codepen.io/rafibomb/pen/NpzLBp

Also - you shouldn't need !important to style Foundation components in general. I removed them and all looks the same :)

Michael Barthel over 2 years ago

Rafi, Thanks for your help.  I had hoped for someone to respond, but wasn't expecting the Grand Poobah himself. I am honored.  I am actually a bit embarrassed by the sloppiness of my code.  I am confident that after I get through the advanced class, I will find more efficient ways to get the same results.

Your solution has given me back my button!  It took me a few minutes to realize that the mouseover color transitions are actually in the primary or secondary classes, not the button class. I have it working fine now.  

Thank you so much for your help on this issues, but especially on your all your work on Foundation development and promotion.  It IS a great CSS framework.  Keep up with the improvements!

 

 

-Mike