Menu icon Foundation
hiding top bar in mobile

Hi,

I am trying to have topbar, act like magellan, and found this solution (http://foundation.zurb.com/forum/posts/789-top-bar-with-magellan-like-behavior), but in mobile it doesn't collapse, and part of the content stays behind the menu.
I found this http://zurb.com/university/library/14 (how to make topbar disappear), I've downloaded the package as per link, but don't know how to integrate it.

Thank you

topbarhide-for-small

Hi,

I am trying to have topbar, act like magellan, and found this solution (http://foundation.zurb.com/forum/posts/789-top-bar-with-magellan-like-behavior), but in mobile it doesn't collapse, and part of the content stays behind the menu.
I found this http://zurb.com/university/library/14 (how to make topbar disappear), I've downloaded the package as per link, but don't know how to integrate it.

Thank you

Robin Cox over 5 years ago

Try this:

@media only screen and (min-width: 40.063em) {
  .tab-bar {
    display: none;
  }
} 

Rafi Benkual over 5 years ago

You could use a visibility class like:
hide-for-small

example http://cdpn.io/xFJDK (click edit pen)

Farzin over 5 years ago

Thank you for the replies.

Robin's suggestion doesn't seem to be working.
And Rafi's tool is not helping me, most probably because I am not good at it, although it seems to use Robin's tab -bar solution.

My problem is not with tab-bar, but with the top-bar, which the solution should be the one on the link I posted, same solution I found at https://github.com/zurb/foundation/issues/3339

The problem is I don't know where to put that code, and use the Smooth Scroll jQuery plugin.
So if you can help me with that I'll try it.

Anyhow i have found a solution using bootstrap, and it works fine.