Menu icon Foundation
Bending Top Bar to include items on Small Size

Hey good folks of Foundation Forum.

My Foundation Kung Fu skills are progressing nicely (including a rather nice adapted Mega Menu based on previous posters implementations), but I've come across something that is making me scratch my slowly balding head.

Using Top Bar, I want to show some menu items when the screen hit's small size. It is easier to show you what I mean. If you head to mashable.com and shrink it down to small / mobile size width:

http://mashable.com/

You'll see that it has the mobile menu icon on the left, the logo and then a search and sign in icons on the right.

Basically I want something like this - I want certain menu item's to appear at small size, and yes, in my case they will also be icons.

The default behaviour when I add any menu items instantly get pulled into the menu drop down.

I can't find anything that would offer a solution, and I've scanned previous forum posts and not seen anybody else ask this already, although I might have missed it.

Any help appreciated!

top barnavigation

Hey good folks of Foundation Forum.

My Foundation Kung Fu skills are progressing nicely (including a rather nice adapted Mega Menu based on previous posters implementations), but I've come across something that is making me scratch my slowly balding head.

Using Top Bar, I want to show some menu items when the screen hit's small size. It is easier to show you what I mean. If you head to mashable.com and shrink it down to small / mobile size width:

http://mashable.com/

You'll see that it has the mobile menu icon on the left, the logo and then a search and sign in icons on the right.

Basically I want something like this - I want certain menu item's to appear at small size, and yes, in my case they will also be icons.

The default behaviour when I add any menu items instantly get pulled into the menu drop down.

I can't find anything that would offer a solution, and I've scanned previous forum posts and not seen anybody else ask this already, although I might have missed it.

Any help appreciated!

Steve Trask about 5 years ago

Hi Stephen,

I think I have a previous code pen to cover this http://codepen.io/gosupernova/details/BvKmH/

Hope this helps

Steve

Stephen Voisey about 5 years ago

Thanks Steve, you've written it slightly differently (which is useful to see in itself) but I ended up doing something similar with the absolute positioning:

.small-menu-container {
  position: absolute;
  top: 0px;
  right: 90px;
  display: block;
  height: $topbar-height;
}

I'll use this as a container and shove in the icon's/buttons I need etc.

Shame about the need to show and hide, as I was hoping for a semantic method with top-bar.

Thanks for the response :)