This is a step by step tutorial for RSD foundation
The example: Button Bar Menu

A Hidden Responsive Stack To Centered Button Bar Menu
In mobile a fixed icon that opens the hidden button stack in vertical
When you click the menu icon in mobile it scrolls to the top and opens the menu
For desktop it is a centered horizontal button bar

Couple of Bonus add ins
After you scroll down the page on a desktop the menu will stick to the top.
A page scroll script you can use for any site that uses jQuery,
(which is included for the foundation build).
This uses it as a scroll to the top arrow, for the mobile icon link to scroll up to the menu
and as a scroll to a page section from the "styling" button.

The download ZIP file:
Button Bar Menu ZIP 20KB
The zip is just the bare bones button bar menu without the step by step tutorial

This is a really well done menu.....looking forward to more of your posts.

Very nice!

Thanks Twinstream, how did you make out with those nasty multi-nested UL's? Easy to get lost doing them isn't it... that is one step by step I was going to get to eventually.

I do have a new one, (the link is in my signature) but the site is in progress since I'm doing it in my spare time. I was going to post in a couple of days to ask for peoples favorite TUTORIAL links for the footer when I get to that far.

Anyway the off canvas side menu from a fixed icon is done if you want to give that one a shot.

Thanks Alter, I am with you until the last step of the sticky part:

Then change the column-1 width from auto to 100%

I feel like such a noob but there is no column width that i can change only on the row that the column is in. Did you mean to say row?

Ok i got it to work kind of by changing the container width to 100%. But now the sticky container moves to the top the very instant you begin to scroll even when the I place the column half way down the page.

Second question is how do you change the styling of the bar once it becomes "sticky" for example if it was a menu i want the background to change to black only when the sticky is activated. Other wise i want it to be transparent overplayed on the image

Here is a link to what I am working on. Ignore the bad color choice of the Karma logo i will fix that later.

http://misterwebguy.com/karmakonstruction-v2_exported/

Thanks in advance. Learning more and more about foundation as I progress.

My bad, that's the button-group container when past the breakpoint from auto to 100%, thanks for catching that one.

I updated the page, you would need a refresh to see the change.
When I get it moved to it's home I'll write that a little differently so it's not so funky out of place kind of thing.

Steve,
What you can do is change the data-top-anchor
So say you want it to start to stick when it gets to that column with the text,
give that column an ID of something like sticky-top
then in the data-top-anchor change the value from 1 to sticky-top
Then you can place the menu bar below the address bar and before the image and give the buttons some color,
and have it stick after it gets past the image at the text column.

Now say you have a few different columns on there other than the one text column.
You can then add data-btm-anchor with a value
So say a footer column give it an ID of something like sticky-bottom and use that for the data-btm-anchor value kind of thing.

To have them change color means writing some jQuery for it so this might be an easier option for you?

Thanks I will give it a go tonight.

Alter Eagle,

One of the things I stumbled over when trying to create that menu, was that i tag with a class and nothing in it. How do you get that into the file in RSD?