Menu icon Foundation

Designer | Richmond, MN

Web Marketing for Small Businesses. We use Foundation for my wife's veterinary practice.

My Posts

  • 11
    Replies
  • F6-Mobile Drop Down Menu Failure

    By Thomas Gerds

    navigation

    Greetings. I have site ready to make live, uploaded for testing, coded with fresh Foundation 6.3.0 template (did not re-use code from Foundation 5). Issue: drop down menu, does not function on (my) android mobile tablet, phone or iPad tablet. Works fine... (continued)

    Last Reply by Val Ery 4 months ago


My Comments

Thomas Gerds commented on Scott Koons's post 4 months

Here is my simple, clean, basic site for our pet hospital using Foundation 6.
https://www.advancedcarepethospital.com/
I'm not a developer, designer or professional in the web field. My wife & I own the practice, and I manage the website. I know just enough HTML & CSS to create what I have now. I recently begun using ATOM, Sublime and Brackets, upgrading from Notepad++. I'm learning more every day.
I started with Foundation v2.2.1 and migrated up every 14 months or so. I began with the basic CSS & HTML downloads in the past.
A week ago I finally installed the full Node powered CLI package. I wished I did this long ago!
With the help of YouTube videos (a big THANK YOU to Gary Jennings!,  Rafi and Kevin!) I've migrated my static site into the full framework with Sass and Panini.
I'm looking forward to future development.
Eskimo Tom

Thomas Gerds commented on Thomas Gerds's post 5 months

It DOES WORK with "data-close-on-click-inside" now, on both my android and iPad. I had to add that line to your original codepen you crafted, in order to get menu to work, on mobile, on my temp site.
Without the line, it did not work. Your original codepen you crafted was missing these 5 words (I believe).
I did not use true or false, but it does function.

Thomas Gerds commented on Thomas Gerds's post 5 months

For me this was the key: data-close-on-click-inside
As in:
<ul id="main-menu" class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-close-on-click-inside>
without: data-close-on-click-inside, linking on mobile failed. Works fine now.

Thomas Gerds commented on Thomas Gerds's post 5 months

2.21.2017 9:31 PM Central Time USA - uploaded the menu on this Codepen to temp site index and it did NOT work on mobile. Yes it works fine on the computer, just not mobile.
eskimotom

Thomas Gerds commented on Thomas Gerds's post 5 months

Val - Bravo!
I like your solution on Code pen: http://codepen.io/Val_Ery/pen/YNomGV, I'm playing with it more.
My preference is to have the color bar run full screen width, while also having the phone # "block" and menu drop downs, align or appear within the sites body width.
Question: Do I fix this with the Row and Column in the html, or is it a .css fix?
My knowledge is limited, thank you.
 
eskimotom

Thomas Gerds commented on Thomas Gerds's post 5 months

I found this workaround successful as well:
http://codepen.io/sinspiral/pen/zoboPp
 
Thank You for your assistance!
 
Eskimo Tom

Posts Followed



Following

    No Content

Followers

My Posts


My Comments

You commented on Scott Koons's post 4 months

Here is my simple, clean, basic site for our pet hospital using Foundation 6.
https://www.advancedcarepethospital.com/
I'm not a developer, designer or professional in the web field. My wife & I own the practice, and I manage the website. I know just enough HTML & CSS to create what I have now. I recently begun using ATOM, Sublime and Brackets, upgrading from Notepad++. I'm learning more every day.
I started with Foundation v2.2.1 and migrated up every 14 months or so. I began with the basic CSS & HTML downloads in the past.
A week ago I finally installed the full Node powered CLI package. I wished I did this long ago!
With the help of YouTube videos (a big THANK YOU to Gary Jennings!,  Rafi and Kevin!) I've migrated my static site into the full framework with Sass and Panini.
I'm looking forward to future development.
Eskimo Tom

You commented on Thomas Gerds's post 5 months

It DOES WORK with "data-close-on-click-inside" now, on both my android and iPad. I had to add that line to your original codepen you crafted, in order to get menu to work, on mobile, on my temp site.
Without the line, it did not work. Your original codepen you crafted was missing these 5 words (I believe).
I did not use true or false, but it does function.

You commented on Thomas Gerds's post 5 months

For me this was the key: data-close-on-click-inside
As in:
<ul id="main-menu" class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-close-on-click-inside>
without: data-close-on-click-inside, linking on mobile failed. Works fine now.

You commented on Thomas Gerds's post 5 months

2.21.2017 9:31 PM Central Time USA - uploaded the menu on this Codepen to temp site index and it did NOT work on mobile. Yes it works fine on the computer, just not mobile.
eskimotom

You commented on Thomas Gerds's post 5 months

Val - Bravo!
I like your solution on Code pen: http://codepen.io/Val_Ery/pen/YNomGV, I'm playing with it more.
My preference is to have the color bar run full screen width, while also having the phone # "block" and menu drop downs, align or appear within the sites body width.
Question: Do I fix this with the Row and Column in the html, or is it a .css fix?
My knowledge is limited, thank you.
 
eskimotom

You commented on Thomas Gerds's post 5 months

I found this workaround successful as well:
http://codepen.io/sinspiral/pen/zoboPp
 
Thank You for your assistance!
 
Eskimo Tom

Posts Followed

Following

  • No Content

Followers

  • No Content