Zurb Foundation 4 topbar fixed/sticky height issue

1
votes

I'm using Zurb Foundation 4 for a website, I've already used it, but I never tried the sticky or fixed topbar class.

The problem is that when I set up the sticky or the fixed class to my nav wrapper, when rendered in browser navbar's height become the double! (I use a container because, from the documentation "To make the top bar stay fixed as you scroll, wrap it in div class="fixed" ")

Anyone knows why the topbar change its height with that classes? I really can't find out a solution!

Here is the code:

<div class="contain-to-grid fixed"> 
      <nav class="top-bar">
         <ul class="title-area">
            <li class="name">
               <h1><a href="#">Title</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
         </ul>
       <section class="top-bar-section">     
         <ul class="right">
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
               <li><a href="#">Link 3</a></li>
               <li><a href="#">Link 4</a></li>
         </ul>
         </section>
      </nav>
   </div>
2
htmlcsszurb-foundation
What is the css of your .fixed class ? Also why are you not using it on your nav ? – Pogrindis
I have not added any custom css to .fixed class, it is a Zurb foundation one. Unfortunatly I'm not at home, tomorrow I'll write back for some news! Thank you for your answer!! – Marco

2 Answers

0
votes

Found the solution:

It seems that the problem is the wrapper div with .contain-to-grid class. If I remove it, I can have a perfectly working sticky/fixed topbar.

When I add that class, my top bar gets fat. In the defaults, I found that:

.contain-to-grid { width: 100%; background: #111111; }
.contain-to-grid .top-bar { margin-bottom: 1.875em; }

so I did an override

.contain-to-grid .top-bar { margin-bottom: 0 !important; }

and now my top-bar is sticky, adjusting to the grid, and thin again!

0
votes

In your custom CSS, add the following : 

.row{
    padding-top: 50px;
}

.top-bar {
    position: fixed;
    width: 100%;
    z-index: 100;
}

This should result in a sticky header, with the correct padding for allowing content to begin under it.

Begin your content as usual with <div class="row">content ... </div>

Reference : http://foundation.zurb.com/templates.php#