Menu icon Foundation
F6 megamenu display clipped

My dropdown pane in my menu doesn't display the full list on the small screen. I would be fine with an overflow scroll but it doesn't work when I place it in the dropdown layer or the li.

I'm using this structure (this is a piece, data/links removed):

                            <li class="navbtn dropdown" data-toggle="flowersdd" >
                            <a href="#" title="Our Flowers are Fresh and responsibly grown." >Our Flowers</a>
                            <div id="flowersdd" class="dropdown-pane" data-dropdown="" data-options="closeOnClick:true; " >
                                <div class="hide-for-medium-only" style="overflow:auto;" >
                                    <div class="small-12 large-3 columns" >
                                    </div>
                                    <div class="small-12 large-3 columns" >
                                     </div>
                                    <div class="small-12 large-3 columns" >
                                    </div>
                                    <div class="small-12 large-3 columns" >
                                    </div>
                                </div>
                            </div>
                            </li>

I use this for small and large and have a medium only version that breaks the data differently.

I'm using F 6.2.3

Thanks in advance for any help.

Sally

foundation 6dropdowntop-bar menu

My dropdown pane in my menu doesn't display the full list on the small screen. I would be fine with an overflow scroll but it doesn't work when I place it in the dropdown layer or the li.

I'm using this structure (this is a piece, data/links removed):

                            <li class="navbtn dropdown" data-toggle="flowersdd" >
                            <a href="#" title="Our Flowers are Fresh and responsibly grown." >Our Flowers</a>
                            <div id="flowersdd" class="dropdown-pane" data-dropdown="" data-options="closeOnClick:true; " >
                                <div class="hide-for-medium-only" style="overflow:auto;" >
                                    <div class="small-12 large-3 columns" >
                                    </div>
                                    <div class="small-12 large-3 columns" >
                                     </div>
                                    <div class="small-12 large-3 columns" >
                                    </div>
                                    <div class="small-12 large-3 columns" >
                                    </div>
                                </div>
                            </div>
                            </li>

I use this for small and large and have a medium only version that breaks the data differently.

I'm using F 6.2.3

Thanks in advance for any help.

Sally

Cédric about 3 years ago