zurb foundation sticky menu - resizes itself when scrolling...

i want my menu bar to be the size of the colums content (not browser width) and to stay at the top of the page when scrolling down...

currently, when you load the page it works fine, but when you then scroll down menu resizes itself to be browser width...

i am using foundation - link to sample included...

any solution for this?
many thanks!
Who is Participating?
weaverkConnect With a Mentor Author Commented:
thanks for the assistance, looking into the css would have been normally a good approach to solving my problem...
 but since i didn't want to edit the foundation.css file or override it (having a a menubar the size of your content is a feature they do mention as possible using this css framework). i kept trying a bit more and came up with the following, which i will put here in case it can help somebody else with this issue...

<div class="sticky">
   <nav class="row top-bar fixed"> 
<!--menu content here -->

Open in new window

Julian HansenConnect With a Mentor Commented:
The problem is when you scroll the window the menu gets a style of .fixed - which is causing the style of the menu to change.

You need to look at the styling on line 2083 of foundation.css

.fixed {
  left: 0;
  position: fixed;
  top: 0;
  z-index: 99;

Open in new window

That is what widends the menu

The height is caused by this style Line 3029 of foundation.css.  The margin comes into play when set to fixed which makes the menu look thicker.

.contain-to-grid .top-bar {
  margin: 0 auto 1.875em;
  max-width: 62.5em;

Open in new window

Julian HansenCommented:
Glad you figured it out.
weaverkAuthor Commented:
thanks again!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.