Menu icon Foundation
Foundation 5 Top Bar Dropdown

While testing my site between the Desktop, iPad and iPhone, I've noticed an issue that I can't seem to resolve:

Dropdown Menus: While touch-clicking a top-bar link on the iPad, the dropdown menu shows up for a second and then the page loads for the top-bar link that was just touched. What am I doing wrong here? When I click a top-bar link on the foundation.zurb.com, I can see the dropdown menu and can then choose a link.

The dropdown hovers and works perfectly in the browser on my Laptop.

Here is the code for my top-bar:

%body
  .off-canvas-wrap
    .inner-wrap
        %nav.tab-bar.show-for-small
          %section.left-small
            %a.left-off-canvas-toggle.menu-icon
              %span Website
        %aside.left-off-canvas-menu
          %ul.off-canvas-list
            %li= link_to 'Option 1', '#'
            %li= link_to 'Option 2', '#'
            %li= link_to 'Option 3', '#'
        %a.exit-off-canvas

        .contain-to-grid
          %nav.top-bar.hide-for-small{:'data-topbar' => ''}
            %ul.title-area
              %li.name
                %h1= link_to 'Website', '/', title: 'Website'
              %li.toggle-topbar.menu-icon
                %a{:title => "", :href => ""}
                  %span
      
            %section.top-bar-section
              %ul.right
                %li.tagline This is a tagline
                %li.divider.show-for-medium-and-up
                %li.has-dropdown
                  %a{:title => "", :href => "/main"} Main
                  %ul.dropdown
                    %li
                      %label Products
                    %li= link_to 'Option 1', '#', title: ''
                    %li= link_to 'Option 2', '#', title: ''
                    %li= link_to 'Option 3', '#', title: ''
                    %li
                      %label Resources & Info
                    %li= link_to 'Option 1', '#', title: ''
                    %li= link_to 'Option 2', '#', title: ''
                    %li= link_to 'Option 3', '#', title: ''
                    %li.divider
                    %li= link_to 'See all »', '#', title: ''
                %li.has-dropdown
                  %a{:title => "", :href => "/secondary"} Secondary
                  %ul.dropdown
                    %li
                      %label Products
                    %li= link_to 'Option 1', '#', title: ''
                    %li= link_to 'Option 2', '#', title: ''
                    %li= link_to 'Option 3', '#', title: ''
                    %li.divider
                    %li= link_to 'See all »', '#', title: ''
            

         

Foundation 5top bardropdownOrbitorientationipadiphonemobileissues

While testing my site between the Desktop, iPad and iPhone, I've noticed an issue that I can't seem to resolve:

Dropdown Menus: While touch-clicking a top-bar link on the iPad, the dropdown menu shows up for a second and then the page loads for the top-bar link that was just touched. What am I doing wrong here? When I click a top-bar link on the foundation.zurb.com, I can see the dropdown menu and can then choose a link.

The dropdown hovers and works perfectly in the browser on my Laptop.

Here is the code for my top-bar:

%body
  .off-canvas-wrap
    .inner-wrap
        %nav.tab-bar.show-for-small
          %section.left-small
            %a.left-off-canvas-toggle.menu-icon
              %span Website
        %aside.left-off-canvas-menu
          %ul.off-canvas-list
            %li= link_to 'Option 1', '#'
            %li= link_to 'Option 2', '#'
            %li= link_to 'Option 3', '#'
        %a.exit-off-canvas

        .contain-to-grid
          %nav.top-bar.hide-for-small{:'data-topbar' => ''}
            %ul.title-area
              %li.name
                %h1= link_to 'Website', '/', title: 'Website'
              %li.toggle-topbar.menu-icon
                %a{:title => "", :href => ""}
                  %span
      
            %section.top-bar-section
              %ul.right
                %li.tagline This is a tagline
                %li.divider.show-for-medium-and-up
                %li.has-dropdown
                  %a{:title => "", :href => "/main"} Main
                  %ul.dropdown
                    %li
                      %label Products
                    %li= link_to 'Option 1', '#', title: ''
                    %li= link_to 'Option 2', '#', title: ''
                    %li= link_to 'Option 3', '#', title: ''
                    %li
                      %label Resources & Info
                    %li= link_to 'Option 1', '#', title: ''
                    %li= link_to 'Option 2', '#', title: ''
                    %li= link_to 'Option 3', '#', title: ''
                    %li.divider
                    %li= link_to 'See all »', '#', title: ''
                %li.has-dropdown
                  %a{:title => "", :href => "/secondary"} Secondary
                  %ul.dropdown
                    %li
                      %label Products
                    %li= link_to 'Option 1', '#', title: ''
                    %li= link_to 'Option 2', '#', title: ''
                    %li= link_to 'Option 3', '#', title: ''
                    %li.divider
                    %li= link_to 'See all »', '#', title: ''
            

         
Ghaida Zahran almost 6 years ago

Could you link to a live example so we can take a look?

Eric Warncke almost 6 years ago

You can add in a hover=false in tab-bar.

Phuong Nguyen almost 6 years ago

Add 'is_hover: false' to data-options doesn't solve the problem. The dropdown won't work on iPad.

Shane Pike almost 6 years ago

I have the same issue and can supply some more details.

  1. This wasn't a problem in Foundation 4. With the exact same HTML & CSS that works in Foundation 4, I can switch only the Foundation 5 min.js file and the dropdown starts exhibiting the behavior you describe. I haven't been able to track down why.

  2. It's not a problem for me with the top-bar, but with dropdowns within the body of the page. See any of the three main dropdowns on the homepage here: http://www.engineerjobs.com/

  3. The dropdowns work like they're supposed to as long as you haven't scrolled the page. Scroll just a little, though, and they suddenly stop working right.

I'm actively searching for the answer. Hopefully I can find something.

Raman Dhawan over 5 years ago

Is the below link of any help. It helped me displaying dropdown at all
http://www.therdnotes.com/2014/08/foundation-top-bar-dropdown-not-working.html

João about 5 years ago

The change discribed here solved the ipad drop down menu problem.

I chaged code from

<li class='has-dropdown not-click'>
        <a>Menu dropdown</a>
        <ul class='dropdown'>
          <li><a href='aulas.php'>Aulas</a></li>
          <li><a href='locais.php'>Locais</a></li>
        </ul>
      </li>

to

<li class='has-dropdown not-click'>
        <a href='#'>Menu dropdown</a>
        <ul class='dropdown'>
          <li><a href='aulas.php'>Aulas</a></li>
          <li><a href='locais.php'>Locais</a></li>
        </ul>
      </li>

lack of href='#' was the cause in my case.