Menu icon Foundation
Navbar Contain-to-grid Sticky

Works great, but seems to break the mobile menu. Is there a way to keep both?

When I narrow the browser I only get the first "button".

<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
  <section class="top-bar-section">
    <ul class="left">
      <li<?php if ($CurrentPage == 'dash') {echo ' class="active"';}; ?>><a href="#">Dashboard</a></li>
      <li<?php if ($CurrentPage == 'clnt') {echo ' class="active"';}; ?>><a href="#">Clients</a></li>
      <li<?php if ($CurrentPage == 'cont') {echo ' class="active"';}; ?>><a href="#">Contacts</a></li>
      <li<?php if ($CurrentPage == 'site') {echo ' class="active"';}; ?>><a href="#">Jobsites</a></li>
      <li<?php if ($CurrentPage == 'lead') {echo ' class="active"';}; ?>><a href="#">Leads</a></li>
      <li<?php if ($CurrentPage == 'prop') {echo ' class="active"';}; ?>><a href="#">Proposals</a></li>
      <li<?php if ($CurrentPage == 'tick') {echo ' class="active"';}; ?>><a href="#">Tickets</a></li>
      <li<?php if ($CurrentPage == 'invo') {echo ' class="active"';}; ?>><a href="#">Invoices</a></li>
      <li<?php if ($CurrentPage == 'cale') {echo ' class="active"';}; ?>><a href="calendar.php">Calendar</a></li>
      <li<?php if ($CurrentPage == 'wiza') {echo ' class="active"';}; ?>><a href="#">Wizards</a></li>
      <li<?php if ($CurrentPage == 'rpts') {echo ' class="active"';}; ?>><a href="#">Reports</a></li>
      <li<?php if ($CurrentPage == 'admn') {echo ' class="active"';}; ?>><a href="#">Admin</a></li>

    </ul>
  </section>
</nav>
</div>

navtopbarsticky

Works great, but seems to break the mobile menu. Is there a way to keep both?

When I narrow the browser I only get the first "button".

<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
  <section class="top-bar-section">
    <ul class="left">
      <li<?php if ($CurrentPage == 'dash') {echo ' class="active"';}; ?>><a href="#">Dashboard</a></li>
      <li<?php if ($CurrentPage == 'clnt') {echo ' class="active"';}; ?>><a href="#">Clients</a></li>
      <li<?php if ($CurrentPage == 'cont') {echo ' class="active"';}; ?>><a href="#">Contacts</a></li>
      <li<?php if ($CurrentPage == 'site') {echo ' class="active"';}; ?>><a href="#">Jobsites</a></li>
      <li<?php if ($CurrentPage == 'lead') {echo ' class="active"';}; ?>><a href="#">Leads</a></li>
      <li<?php if ($CurrentPage == 'prop') {echo ' class="active"';}; ?>><a href="#">Proposals</a></li>
      <li<?php if ($CurrentPage == 'tick') {echo ' class="active"';}; ?>><a href="#">Tickets</a></li>
      <li<?php if ($CurrentPage == 'invo') {echo ' class="active"';}; ?>><a href="#">Invoices</a></li>
      <li<?php if ($CurrentPage == 'cale') {echo ' class="active"';}; ?>><a href="calendar.php">Calendar</a></li>
      <li<?php if ($CurrentPage == 'wiza') {echo ' class="active"';}; ?>><a href="#">Wizards</a></li>
      <li<?php if ($CurrentPage == 'rpts') {echo ' class="active"';}; ?>><a href="#">Reports</a></li>
      <li<?php if ($CurrentPage == 'admn') {echo ' class="active"';}; ?>><a href="#">Admin</a></li>

    </ul>
  </section>
</nav>
</div>
Wing-Hou Chan over 5 years ago

Hi Scott,

Is there a link to where I can see this problem? -It might make it easier to understand and solve.

Cheers,

winghouchan

Andrew Bockus almost 5 years ago

winghouchan, you can view it on my project website at andrewbock.us

I have this same exact issue and it's really bugging me.

Stuart Nelson almost 5 years ago

Hi guys. I have a fix I'm using. Im sure there are better ways of going about it but for my large media querry I am using this CSS:

    .fixed {
      background: $br-blue; //whatever the background colour is for your topbar

      .top-bar {
        max-width: 62.5em; // width of your grid
        margin: 0 auto; // keeping in centered
      }  
    }

Rafi Benkual almost 5 years ago

What exactly is this fixing? Seems to work fine here: http://codepen.io/rafibomb/pen/JDElA