Menu icon Foundation

My Posts




My Comments

Jeremy Mansfield commented on Phoenix Kawlay's post 5 months

Unfortunately, after looking at the In-Canvas to Off-Canvas as well as the Nested Off-Canvas, it does not do what is most common of mobile navigation patterns:


Sharing the same navigation elements for desktop and mobile.
Having the same navigation elements switch from horizontally wide and top of page on desktop and then to off canvas and left hand panel on mobile.
Most importantly, pushing the content over for the off canvas panel reveal and not simply “overlapping” the page content. This is an unfortunate user experience.



Using Foundation 5, I created this website … http://design.anchortransportation.com.php56-28.ord1-1.websitetestlink.com … and did exactly what I am describing above using this Foundation 5 “hack" that was provided by another developer: http://calebserna.com/foundation-top-bar-offcanvas-hybrid/

 
At the moment, it does not look like it's possible to do all three points above using Foundation 6, which is disappointing. 

Jeremy Mansfield commented on Carolyn Lee's post 5 months

Unfortunately, after looking at the In-Canvas to Off-Canvas as well as the Nested Off-Canvas, it does not do what is most common of mobile navigation patterns:


Sharing the same navigation elements for desktop and mobile.
Having the same navigation elements switch from horizontally wide and top of page on desktop and then to off canvas and left hand panel on mobile.
Most importantly, pushing the content over for the off canvas panel reveal and not simply “overlapping” the page content. This is an unfortunate user experience.



Using Foundation 5, I created this website … http://design.anchortransportation.com.php56-28.ord1-1.websitetestlink.com … and did exactly what I am describing above using this Foundation 5 “hack" that was provided by another developer: http://calebserna.com/foundation-top-bar-offcanvas-hybrid/

 
At the moment, it does not look like it's possible to do all three points above using Foundation 6, which is disappointing. 

Jeremy Mansfield commented on Jeremy Mansfield's post 5 months

So, I've been able to determine that it's the off canvas background that is "disappearing" before it's fully out of view that is causing the last second flash. Not sure how to prevent this?

Jeremy Mansfield commented on Carolyn Lee's post 5 months

The tutorials here no longer work or are no longer available.

Jeremy Mansfield commented on Phoenix Kawlay's post 5 months

Hi @Rafi Benkual
In foundation 5 there was a hack to allow a normal top bar menu for desktop and then when you went to small (mobile) screen sizes, you could display the hamburger menu icon. Clicking the hamburger would trigger the off canvas menu with the navigation. This work around did not require two different sets of navigation for large screens vs. mobile.
In Foundation 6, how do you have the top of page navigation then switch to an off canvas navigation for mobile, using the same set of navigation links, and not having to double them up? This seems to be a huge issue and huge request, which Foundation 6 does not solve.
Thanks!Jeremy

Jeremy Mansfield commented on Phoenix Kawlay's post 5 months

Hi @Rafi Benkual
In foundation 5 there was a hack to allow a normal top bar menu for desktop and then when you went to small (mobile) screen sizes, you could display the hamburger menu icon. Clicking the hamburger would trigger the off canvas menu with the navigation. This work around did not require two different sets of navigation for large screens vs. mobile.
In Foundation 6, how do you have the top of page navigation then switch to an off canvas navigation for mobile, using the same set of navigation links, and not having to double them up? This seems to be a huge issue and huge request, which Foundation 6 does not solve.
Thanks!Jeremy

Jeremy Mansfield commented on Roy Six's post 7 months

How do you get content in <main> to center vertically on the page, with the sticky footer?

Jeremy Mansfield commented on YH's post 7 months

I also am not using SASS, and would like to know the answer to this question.

Jeremy Mansfield commented on Jeremy Mansfield's post over 4 years

For the off canvas implementation, I followed this tutorial:
http://calebserna.com/foundation-top-bar-offcanvas-hybrid/

Works great! Wish this was built into Foundation by default. Not sure why it isn't.

Jeremy Mansfield commented on Jeremy Mansfield's post over 4 years

Thanks guys.<div class="clearfix"></div> did the trick!

I also figured out that adding width: 100% and display: inline-block to the containing element in my example did the trick as well!

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Phoenix Kawlay's post 5 months

Unfortunately, after looking at the In-Canvas to Off-Canvas as well as the Nested Off-Canvas, it does not do what is most common of mobile navigation patterns:


Sharing the same navigation elements for desktop and mobile.
Having the same navigation elements switch from horizontally wide and top of page on desktop and then to off canvas and left hand panel on mobile.
Most importantly, pushing the content over for the off canvas panel reveal and not simply “overlapping” the page content. This is an unfortunate user experience.



Using Foundation 5, I created this website … http://design.anchortransportation.com.php56-28.ord1-1.websitetestlink.com … and did exactly what I am describing above using this Foundation 5 “hack" that was provided by another developer: http://calebserna.com/foundation-top-bar-offcanvas-hybrid/

 
At the moment, it does not look like it's possible to do all three points above using Foundation 6, which is disappointing. 

You commented on Carolyn Lee's post 5 months

Unfortunately, after looking at the In-Canvas to Off-Canvas as well as the Nested Off-Canvas, it does not do what is most common of mobile navigation patterns:


Sharing the same navigation elements for desktop and mobile.
Having the same navigation elements switch from horizontally wide and top of page on desktop and then to off canvas and left hand panel on mobile.
Most importantly, pushing the content over for the off canvas panel reveal and not simply “overlapping” the page content. This is an unfortunate user experience.



Using Foundation 5, I created this website … http://design.anchortransportation.com.php56-28.ord1-1.websitetestlink.com … and did exactly what I am describing above using this Foundation 5 “hack" that was provided by another developer: http://calebserna.com/foundation-top-bar-offcanvas-hybrid/

 
At the moment, it does not look like it's possible to do all three points above using Foundation 6, which is disappointing. 

You commented on Jeremy Mansfield's post 5 months

So, I've been able to determine that it's the off canvas background that is "disappearing" before it's fully out of view that is causing the last second flash. Not sure how to prevent this?

You commented on Carolyn Lee's post 5 months

The tutorials here no longer work or are no longer available.

You commented on Phoenix Kawlay's post 5 months

Hi @Rafi Benkual
In foundation 5 there was a hack to allow a normal top bar menu for desktop and then when you went to small (mobile) screen sizes, you could display the hamburger menu icon. Clicking the hamburger would trigger the off canvas menu with the navigation. This work around did not require two different sets of navigation for large screens vs. mobile.
In Foundation 6, how do you have the top of page navigation then switch to an off canvas navigation for mobile, using the same set of navigation links, and not having to double them up? This seems to be a huge issue and huge request, which Foundation 6 does not solve.
Thanks!Jeremy

You commented on Phoenix Kawlay's post 5 months

Hi @Rafi Benkual
In foundation 5 there was a hack to allow a normal top bar menu for desktop and then when you went to small (mobile) screen sizes, you could display the hamburger menu icon. Clicking the hamburger would trigger the off canvas menu with the navigation. This work around did not require two different sets of navigation for large screens vs. mobile.
In Foundation 6, how do you have the top of page navigation then switch to an off canvas navigation for mobile, using the same set of navigation links, and not having to double them up? This seems to be a huge issue and huge request, which Foundation 6 does not solve.
Thanks!Jeremy

You commented on Roy Six's post 7 months

How do you get content in <main> to center vertically on the page, with the sticky footer?

You commented on YH's post 7 months

I also am not using SASS, and would like to know the answer to this question.

You commented on Jeremy Mansfield's post over 4 years

For the off canvas implementation, I followed this tutorial:
http://calebserna.com/foundation-top-bar-offcanvas-hybrid/

Works great! Wish this was built into Foundation by default. Not sure why it isn't.

You commented on Jeremy Mansfield's post over 4 years

Thanks guys.<div class="clearfix"></div> did the trick!

I also figured out that adding width: 100% and display: inline-block to the containing element in my example did the trick as well!

Posts Followed

Following

  • No Content

Followers

  • No Content