Horizontal Navigation with zurb foundation

Question

I've a horizontal navigation on my page with the following code:

    <div class="row">
    <nav class="hide-for-small-only show-for-medium-up navi">
         <ul class="navigation">
          <li><a href="#what" id="whatanchor"><b>W</b>as<br> ist es?
</a></li>
          <li><a href="#why" id="whyanchor"><b>W</b>arum<br> brauchen 
Sie es?</a></li>
          <li><a href="#how" id="howanchor"><b>W</b>ie<br> 
funktioniert es?</a></li>
          <li><a href="#get" id="getanchor"><b>W</b>as<br> bekommen 
Sie?</a></li>
          <li><a href="#price" id="priceanchor"><b>W</b>as<br> 
bezahlen Sie?</a></li>
          <li><a href="#ask" id="askanchor"><b>W</b>elche<br> Fragen   
haben Sie?</a></li>
         </ul>
     </nav>
</div>

I have issues when I view it on smaller resolutions comparison other screens the separate navigation points break down to the next line. But I want that they get smaller and does not break.

The link to the original page is: Link

I hope anyone have a solution for me.

// Edit:

Also my Navigation jump everytime when i scroll down.

Answer 1

You could using media queries

1) decrease right/left padding

padding-right:0;
padding-left:0;

2) make buttons span across full width of page

button 1
button 2
........
button 6

li{
display:inline-block;
width:100%;
}

3) make buttons span across half width of page

button 1 button 2
........ ........
button 5 button 6

li{
display:inline-block;
float:left;
width:50%;
}