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!
LVL 1
weaverkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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

0
weaverkAuthor 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 -->
   </nav>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Glad you figured it out.
0
weaverkAuthor Commented:
thanks again!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.