CODEWITHSUNDEEP
csszurb-foundation
Rommel Paras
Rommel Paras

Reputation: 325

How do I fix Zurb Foundation dropdown issue on mobile devices?

Here's the code I used:

<div style="top-buttons">
            <a href="#" data-dropdown="tinyDrop"><img src="images/sandwich.gif" class="sandwich" width="30" height="30"></a>
</div>
<ul id="tinyDrop" class="f-dropdown" data-dropdown-content>
    <hr>            
    <li class="navitem"><a href="#"><img src="images/group-25.png"/> Trends / Activity</a></li>
    <hr>
    <li class="navitem"><a href="#"><img src="images/settings2-25.png"/> Settings</a></li>
    <hr>
    <li class="navitem"><a href="#"><img src="images/help-25.png"/> Help</a></li>
    <hr>
    <li class="navitem"><a href="#"><img src="images/star-25.png"/> Rate Clustir</a></li>
    <hr>
    <li class="navitem"><a href="#"><img src="images/exit-25.png"/> Logout</a></li>
    <hr>
</ul>

I also tried specifying a class (open) which is supposed to be added when the user taps/clicks the button:

<script>
    $(document).foundation({
      // specify the class used for active dropdowns
      active_class: 'open'
    });
</script>

with the following css to see if this class can even do anything. It looks like it's not even being utilized.

.open{
   display:none;
}

Any ideas how I can fix this probably with jquery or a better css. I hope this is not a Foundation bug.enter image description here

Upvotes: 0

Views: 770

Answers (1)

user1625066
user1625066

Reputation:

Are you on Foundation 5? I noticed after upgrading from 4 to 5 that you need the "data-dropdown-init" attribute on the parent element as shown below

    <a href="#" data-dropdown-init="" data-dropdown="tinyDrop"><img src="images/sandwich.gif" class="sandwich" width="30" height="30"></a>

Without the above modification, I see javascript errors in the console complaining about undefined properties in foundation.dropdown.js.

Upvotes: 2

Related Questions