Step by Step - foundation

Button Bar Menu

A horizontal button bar menu for medium and above.
Stacked hidden buttons that open from an icon for mobile.
RSD foundation 6.4.1


Class blue
Id yellow
Type pink
Attribute green
Attribute Value orange

The set up on a new foundation project

We'll make the header and menu the full width of the screen for this example
Select the row and give it the class the custom class row-full-width
In DIMENSIONS change Max-width 1200px to none
Select the existing column give it the custom class header
In DIMENSIONS make the Min-height 100px
That is for the sticky menu part we'll add later
From Content place a Heading 1 and select it
Go to design from the dropdown use the class text-center
Add a second row select it and also give it the custom class row-full-width
Select that column and give it the custom class menu-column
In DIMENSIONS change all the padding to 0

The Horizontal Button Bar

Select the menu-column and go to Content
Drag in a Container Div from the container dropdown in Layout at the bottom
In Design from the dropdown ADD the classes button-group and expanded
If you use other containers also give it a custom class of button-bar-container
Go to Content and add a Button-link it'll have the default class button
Add a custom class menu-button so you can style them all at once later
For now in HREF put in the link #no-link
Below Target you'll see a squares icon select it to duplicate 4 more buttons

The Vertical Stacked Buttons for Mobile

With the slider to the left of the lowest break point
Select the button-group container and click on the expanded class to grey it out
(when they are greyed out you can pick which class the style apply to)
Go to POSITION under Display Flex change the Direction from Row to Column
Move the slider right past the first break point and change the Direction to Row
Slide it back and forth you'll see it change.
Move the slider to the left of the first break point again for the rest.
Give it the ID of menu-bar
That's important we'll use that later as an attribute value Target

The Icon Menu Link

Select the menu-column go to Layout
Add a column with 12 spans below it
That is so you'll have all the menu parts in one row to make a Symbol
Go to design and give it the custom Class icon-column
Go to Content and ADD a Font Icon Link into that icon-column, I used menu3
In Design give it the custom class of menu-link
Don't use menu-icon that's a foundation default class
In HREF put in the link #no-link
That stops it from jumping to the top
In POSITION and make it fixed with a value of top 0px and right 10px
ADD the attribute data-toggle
That will be for making the menu appear in mobile when it's clicked on

Making the Menu-Link icon only appear for Mobile and the menu toggle from it

Select the icon-column that has the menu icon in it
ADD the ATTRIBUTE data-responsive-toggle from the dropdown
For it's attribute value use menu-bar
That's the ID we gave to the button-group container earlier
the responsive attribute makes the menu hidden in mobile
and also makes the icon not appear when it's a horizontal bar

Preview ON

You'll see this work with a preview from your browser
Select Preview On and you'll see the the horizontal menu bar
If you drag the window left for a mobile size you'll only see the menu icon
Click on the menu icon and you'll see the stacked menu


These two options are also in the ZIP file

Making the mobile menu open where the user is on the page

This is an option to have the mobile stacked menu fixed
Select the menu-column the one with the menu-container in it
With the slider to the left of the first breakpoint
In POSITION used fixed and a top value of 50px
That's so it opens under the menu icon
In Z-index select no unit put in 1000 so it'll be above everything on the page
Move the slider to the right of the first breakpoint
Change the position to static which is the default
(Remember to move the slider back to the left of the first breakpoint)
NOTE: If you don't use this option change the icon menu link from
#no-link to just # so it jumps up to the stacked menu at the top
If you want to work under the fixed menu you can click on the static
position then back to fixed when done RSD will retain the settings

Making the horizontal menu in desktop stick to the top

This is an option so when you scroll down the page on desktops
(medium screens and above) the menu stays fixed to the top
Select the menu-column the one with the button-group container inside it
Slide it over past the first breakpoint
In Design ADD the attribute data-sticky-container from the dropdown
Now go to the button-group container
ADD the attribute data-sticky
ADD the attribute data-options with a value of marginTop:0; (copy/paste)
ADD the attribute data-top-anchor with a value of menu-bar
In DIMENSIONS change the button-group container width from auto to 100%
Remember to slide it back to the left of the first breakpoint when done
NOTE: The attribute value menu-bar is the ID of the buton-group container you may
notice in the example it sticks when it gets to that column with the container in it
if you wanted it to stick at a different column give that column a unique
ID and then use that ID name as the top anchor value