Menu icon Foundation
More Top-Bar Tips and Tricks

Hey Everyone,
Just wanted to share another quick tip on customizing Top Bar I hope you'll find helpful.

Last week we wrote a lesson on Top Bar http://zurb.com/university/lessons/de-coding-top-bar-customizations

One of the customizations looked like this:

Stacked topbar

Looks great on desktop. In the collapsed mobile version, the social icons are stacked vertically like this:

Screen shot 2015 06 21 at 10.18.31 pm

A question was asked on Stack Overflow on how to Make these horizontal. Makes sense. So I made a little demo on it.

You can find it here: http://codepen.io/rafibomb/pen/KpXEVe?editors=110

Also, someone asked how to make the large screen dropdown links horizontal. So I made that too. Hope it helps you guys! http://codepen.io/rafibomb/pen/YXrgPw?editors=110

top-barnavigation

Hey Everyone,
Just wanted to share another quick tip on customizing Top Bar I hope you'll find helpful.

Last week we wrote a lesson on Top Bar http://zurb.com/university/lessons/de-coding-top-bar-customizations

One of the customizations looked like this:

Stacked topbar

Looks great on desktop. In the collapsed mobile version, the social icons are stacked vertically like this:

Screen shot 2015 06 21 at 10.18.31 pm

A question was asked on Stack Overflow on how to Make these horizontal. Makes sense. So I made a little demo on it.

You can find it here: http://codepen.io/rafibomb/pen/KpXEVe?editors=110

Also, someone asked how to make the large screen dropdown links horizontal. So I made that too. Hope it helps you guys! http://codepen.io/rafibomb/pen/YXrgPw?editors=110

Steven Muncy almost 4 years ago

Great examples. Is there a way to have a sticky bottom menu on small screens?

Dennis almost 4 years ago

This is totally awesome, also nice lesson you wrote and especially the second codepen will be usefull for me, so thanks Rafi!