Menu icon Foundation

Developer

My Posts


My Comments

Adam commented on Rafi Benkual's post over 3 years

Hi Rafi,
This is excellent, thank you.
Now, how do we add an off canvas menu to this?
I've tried to do this using sticky on the top-bar which sticks the top-bar but when you open off canvas and scroll the top-bar isn't sticky any more. Also if you're already half way down the page and open off canvas the top bar is no longer sticky, this is with data-force-top="false".
You'll will find numerous threads about this on the forums and there were various 'hacks' to get this working with foundation 5 each with their own annoyances, so I think a lot of people would be appreciative to see this working smoothly in zf6 as well as guide on how to do this.
Cheers,
Adam
 

Adam commented on Rafi Benkual's post over 3 years

Thanks for the great work from the zurb team and contributors.
What's the process for bringing these updates across into the foundation-rails version?
and how long does this normally take?
I'm waiting for these fixes so I can enable flexbox mode which you can't do when using the foundation-rails gem.
 

Adam commented on Tharaka De Silva's post over 3 years

Hi Tharaka,
I have the exact same problem as show in your screenshots.
Can you please try removing your code and using the follow code, which works for me, and then if that is working add in the extra menu items you want.
<div class="top-bar-container" data-sticky-container>
<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li></li>
<li></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
I wonder if your code is causing that issue because you are applying the sticky to 'top-bar' instead of a containing div and then within your stickying you're calling top-bar-title, instead of top-bar.

Adam commented on Vladimir Kharaman's post over 3 years

Hi Vladamir and Philipp,
I ran into the same problem and I think its to do with the data-options, mainly setting anchor to page. I'm using top-bar not title-bar but I don't think that should matter.
Here's my working code:
 
<div class="top-bar-container" data-sticky-container>
<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li></li>
<li></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>

Adam commented on Philipp Jung's post over 3 years

Hey mate,
Try changing this:
<div class="title-bar" data-sticky data-options="marginTop:0" style="width:100%">
to this:
<div class="title-bar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
 

Adam commented on Tharaka De Silva's post over 3 years

Hey mate,
Trying changing this:
<div class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%">
to this:
<div class="top-bar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
 

Adam commented on Jorge Molrem's post over 3 years

I too am interested to know this also.
Any codepens for this working nicely in ZF6?

Adam commented on Albert's post over 3 years

@Andres Bott are you saying you've tried to do this in F6 with no success? After having a quick look at the F6 docs I think it might be easier to do? Take a look at Sticky:

http://foundation.zurb.com/sites/docs/sticky.html

Adam commented on Albert's post over 3 years

2 years since this was originally posted. Is there a good working solution yet?

I tried Rafi Benkual solution where it causes the tab bar to cover the browsers scroll bar at the top and you have to force some space before your main content otherwise it's chopped off.

I also tried wlc's solution which seems to have the opposite problem it chops off the bottom part of the browsers scroll bar.

After 2 years I'd really hope there is a nice solution to this :(

Adam commented on Brokleen's post over 3 years

I too would also like a fixed top bar to work nicely with off canvas.

I found this 3 page forum post with various work around's each which seem to have their own issues.

http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar?page=3/

This forum post was originally posted 2 years ago so there must be a nice solution to this problem?

Does zurb respond on these forums? is it possible to get an official solution to this?

Cheers,
A

Posts Followed



  • 23
    Replies
  • So Long and Farewell

    By Russel Porosky

    bug

    I used to love Foundation. It made all the things (well, most of them) nice and easy with a relative minimum of class name overhead. My designers would have their way with things and I never worried about whether or not those things would be troublesome. ... (continued)

    Last Reply by Designer almost 3 years ago





  • 1
    Reply
  • Off canvas topbar fixed in F6

    By Jorge Molrem

    off-canvastobparfixed

    I saw in this discussion of the forum that two options were offered in Foundation 5 for having a fixed topbar and off canvas. http://foundation.zurb.com/forum/posts/35696-off-canvas-topbar-fixed It is stated in that discussion that a solution was... (continued)

    Last Reply by Adam over 3 years ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Rafi Benkual's post over 3 years

Hi Rafi,
This is excellent, thank you.
Now, how do we add an off canvas menu to this?
I've tried to do this using sticky on the top-bar which sticks the top-bar but when you open off canvas and scroll the top-bar isn't sticky any more. Also if you're already half way down the page and open off canvas the top bar is no longer sticky, this is with data-force-top="false".
You'll will find numerous threads about this on the forums and there were various 'hacks' to get this working with foundation 5 each with their own annoyances, so I think a lot of people would be appreciative to see this working smoothly in zf6 as well as guide on how to do this.
Cheers,
Adam
 

You commented on Rafi Benkual's post over 3 years

Thanks for the great work from the zurb team and contributors.
What's the process for bringing these updates across into the foundation-rails version?
and how long does this normally take?
I'm waiting for these fixes so I can enable flexbox mode which you can't do when using the foundation-rails gem.
 

You commented on Tharaka De Silva's post over 3 years

Hi Tharaka,
I have the exact same problem as show in your screenshots.
Can you please try removing your code and using the follow code, which works for me, and then if that is working add in the extra menu items you want.
<div class="top-bar-container" data-sticky-container>
<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li></li>
<li></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
I wonder if your code is causing that issue because you are applying the sticky to 'top-bar' instead of a containing div and then within your stickying you're calling top-bar-title, instead of top-bar.

You commented on Vladimir Kharaman's post over 3 years

Hi Vladamir and Philipp,
I ran into the same problem and I think its to do with the data-options, mainly setting anchor to page. I'm using top-bar not title-bar but I don't think that should matter.
Here's my working code:
 
<div class="top-bar-container" data-sticky-container>
<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li></li>
<li></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>

You commented on Philipp Jung's post over 3 years

Hey mate,
Try changing this:
<div class="title-bar" data-sticky data-options="marginTop:0" style="width:100%">
to this:
<div class="title-bar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
 

You commented on Tharaka De Silva's post over 3 years

Hey mate,
Trying changing this:
<div class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%">
to this:
<div class="top-bar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
 

You commented on Jorge Molrem's post over 3 years

I too am interested to know this also.
Any codepens for this working nicely in ZF6?

You commented on Albert's post over 3 years

@Andres Bott are you saying you've tried to do this in F6 with no success? After having a quick look at the F6 docs I think it might be easier to do? Take a look at Sticky:

http://foundation.zurb.com/sites/docs/sticky.html

You commented on Albert's post over 3 years

2 years since this was originally posted. Is there a good working solution yet?

I tried Rafi Benkual solution where it causes the tab bar to cover the browsers scroll bar at the top and you have to force some space before your main content otherwise it's chopped off.

I also tried wlc's solution which seems to have the opposite problem it chops off the bottom part of the browsers scroll bar.

After 2 years I'd really hope there is a nice solution to this :(

You commented on Brokleen's post over 3 years

I too would also like a fixed top bar to work nicely with off canvas.

I found this 3 page forum post with various work around's each which seem to have their own issues.

http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar?page=3/

This forum post was originally posted 2 years ago so there must be a nice solution to this problem?

Does zurb respond on these forums? is it possible to get an official solution to this?

Cheers,
A

Posts Followed

Following

  • No Content

Followers

  • No Content