Menu icon Foundation
Top Bar Drop Menu Slides out of View on iPhone

Just noticed a big issue with my Top Bar drop menu on my iPhone. When I click a parent link, the entire rest of the menu slides through quickly and then out of view except for a small bit of the button text.

Anyone else having this issue. I'm using the show parent link to enable that parent item to also be a clickable link.

         <nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true">   

         

top-bartop bardrop menuiphonemobile

Just noticed a big issue with my Top Bar drop menu on my iPhone. When I click a parent link, the entire rest of the menu slides through quickly and then out of view except for a small bit of the button text.

Anyone else having this issue. I'm using the show parent link to enable that parent item to also be a clickable link.

         <nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true">   

         
Marc McGee over 5 years ago

I may have some kind of mismatched alignment going on. On the iPhone, the tiny triangle is partially behind the button text.

Reviewing my CSS now.

Steve Trask over 5 years ago

Hey Marc,

If you have a link, I am happy to take a look

Marc McGee over 5 years ago

Hi Steve:

I figured it out. Got confused with my use of display: block and display: inline-block on my .top-bar-section. between the desktop version and the mobile version. Swapping them solved the issue.

I was trying to get tricky and create a separate small group of my own customize css for top-bar, but now have just implemented the changes directly to the css.

Steve Trask about 5 years ago

Hey Marc,

Thanks for the update, any issues just let us know