Menu icon Foundation
Topbar - Don't collapse/toggle for mobiles

I've set up a very simple page for which I'm playing with and I'm trying to set up a top bar menu that does not collapse in the "menu icon". I'm looking for a way where the navigation turns from a horizontal list for medium/large screens to a vertical list for small screens.

If I take away the list item for the menu-icon line all I am left with is the first item in the list.

I've also tried the hide-for-small class for the title-area UL, but that only hides the "menu-icon"

Any ideas in how I can achieve this please?

  <div class="row">
    <nav class="nc_top-bar top-bar" data-topbar>
      <ul class="nc_title-area title-area hide-for-small">
        <li class="name"></li>
        <!--<li class="toggle-topbar menu-icon"><a href="#">menu</a></li>-->
      </ul>
      <section class="nc_top-bar-section top-bar-section">
        <ul class="left">
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT US</a></li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">CONTACT US</a></li>
        </ul>
      </section>
    </nav>
  </div>

            

         

Small screen

Medium screen

topbarmenunavnavigationtoggle menu

I've set up a very simple page for which I'm playing with and I'm trying to set up a top bar menu that does not collapse in the "menu icon". I'm looking for a way where the navigation turns from a horizontal list for medium/large screens to a vertical list for small screens.

If I take away the list item for the menu-icon line all I am left with is the first item in the list.

I've also tried the hide-for-small class for the title-area UL, but that only hides the "menu-icon"

Any ideas in how I can achieve this please?

  <div class="row">
    <nav class="nc_top-bar top-bar" data-topbar>
      <ul class="nc_title-area title-area hide-for-small">
        <li class="name"></li>
        <!--<li class="toggle-topbar menu-icon"><a href="#">menu</a></li>-->
      </ul>
      <section class="nc_top-bar-section top-bar-section">
        <ul class="left">
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT US</a></li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">CONTACT US</a></li>
        </ul>
      </section>
    </nav>
  </div>

            

         

Small screen

Medium screen

This post has been closed. No new replies can be added.

Asif about 5 years ago

You could use the top-bar for large and then use off canvas for small. would that work?

Kalpesh B about 5 years ago

Hi Asif, thanks for your reply. So does that mean it isn't possible to turn off the toggle?

Asif about 5 years ago

Kalpesh,

I'm a little confused as to what you want. Do you want the menu to be open vertically on small screens and be always open? then Top-Bar for small screens might not be a good idea. you could use the off-canvas and set it to be open by default but that will hide once the user selects the navigation item. Lastly you could use a combination of Top-Nav which you can show for medium and up, and have SUB-NAV for small screens only. You can adjust the CSS in the Sub-Nav to display vertically.

Let me know if this works for you.

Kalpesh B about 5 years ago

Hi Asif,

I managed to fix it by this code. I am still able to use the Top Bar code...

@media only screen {
  .top-bar {
    height: auto;
  }
}