Menu icon Foundation
Show toggle menu on desktop version of website

Hi There,

I wanted to know if there is any way to show the toggle menu on the desktop version of a website and also on the mobile version. Like this website: http://www.teehanlax.com/ If so, how would I do something like that?

Do you need to see my code?

Thank you!

menu iconmobiledesktop

Hi There,

I wanted to know if there is any way to show the toggle menu on the desktop version of a website and also on the mobile version. Like this website: http://www.teehanlax.com/ If so, how would I do something like that?

Do you need to see my code?

Thank you!

Karl Ward almost 6 years ago

Foundation 5 has an off-canvas menu, but sets the menu to come out from left or right:
http://foundation.zurb.com/docs/components/offcanvas.html

Perhaps you are referring to the topbar menu? This menu can be set to always display the mobile layout:
SCSS
$topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout

It is just a menu though, so it won't work like in the example link, which basically just toggles a hidden off-canvas html element.

Sophia Taveras almost 6 years ago

Yes I am referring to the topbar menu but didn't want it to work like the example link. i only showed the example link to show how they use the little hamburger icon on the desktop version. That's what I want.

Is there a way of doing this without using SCSS. I'm not very familiar with it.

Sorry i'm just pretty new to all of this. I appreciate your help!

Rafi Benkual almost 6 years ago

The easiest way is to use the custom download with the breakpoint really wide.

It looks like to do this in css, you need to override this:

meta.foundation-mq-topbar {
   font-family: "only screen and (min-width:40.063em)";
   width: 40.063em;
}

and this entire media query:

@media only screen and (min-width: 40.063em) {
  .top-bar {
    background: #333333;
    *zoom: 1;
    overflow: visible; }
    .top-bar:before, .top-bar:after {
      content: " ";
      display: table; }
    .top-bar:after {
      clear: both; }
    .top-bar .toggle-topbar {
      display: none; }
    .top-bar .title-area {
      float: left; }
    .top-bar .name h1 a {
      width: auto; }
    .top-bar input,
    .top-bar .button {
      font-size: 0.875rem;
      position: relative;
      top: 7px; }
    .top-bar.expanded {
      background: #333333; }

  .contain-to-grid .top-bar {
    max-width: 62.5rem;
    margin: 0 auto;
    margin-bottom: 0; }

  .top-bar-section {
    -webkit-transition: none 0 0;
    -moz-transition: none 0 0;
    transition: none 0 0;
    left: 0 !important; }
    .top-bar-section ul {
      width: auto;
      height: auto !important;
      display: inline; }
      .top-bar-section ul li {
        float: left; }
        .top-bar-section ul li .js-generated {
          display: none; }
    .top-bar-section li.hover > a:not(.button) {
      background: #272727;
      color: white; }
    .top-bar-section li a:not(.button) {
      padding: 0 15px;
      line-height: 45px;
      background: #333333; }
      .top-bar-section li a:not(.button):hover {
        background: #272727; }
    .top-bar-section .has-dropdown > a {
      padding-right: 35px !important; }
      .top-bar-section .has-dropdown > a:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
        border-top-style: solid;
        margin-top: -2.5px;
        top: 22.5px; }
    .top-bar-section .has-dropdown.moved {
      position: relative; }
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: none; }
    .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
      display: block; }
    .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
      border: none;
      content: "\00bb";
      top: 1rem;
      margin-top: -2px;
      right: 5px; }
    .top-bar-section .dropdown {
      left: 0;
      top: auto;
      background: transparent;
      min-width: 100%; }
      .top-bar-section .dropdown li a {
        color: white;
        line-height: 1;
        white-space: nowrap;
        padding: 12px 15px;
        background: #333333; }
      .top-bar-section .dropdown li label {
        white-space: nowrap;
        background: #333333; }
      .top-bar-section .dropdown li .dropdown {
        left: 100%;
        top: 0; }
    .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
      border-bottom: none;
      border-top: none;
      border-right: solid 1px #4d4d4d;
      clear: none;
      height: 45px;
      width: 0; }
    .top-bar-section .has-form {
      background: #333333;
      padding: 0 15px;
      height: 45px; }
    .top-bar-section ul.right li .dropdown {
      left: auto;
      right: 0; }
      .top-bar-section ul.right li .dropdown li .dropdown {
        right: 100%; }

Hope that explains it!

Rafi Benkual almost 6 years ago

Alternatively, you can use an extend dropdown, and put the menu-icon in that. You can set up links in it.

<a href="#" data-dropdown="drop5" class="large button dropdown expand">Dropdown Button</a>

<ul id="drop5" data-dropdown-content="" class="f-dropdown open" style="position: absolute; top: 617.0625px; left: 13.328125px;">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

Rafi Benkual almost 6 years ago

Changing the topbar breakpoint with the css version requires changes in 3 spots. Use the foundation.css stylesheet.

Say you always want the mobile menu,

About line 1662

@media only screen and (min-width: 9999px) {
  .top-bar {
    background: #333333;
    *zoom: 1;
    overflow: visible; }

About line 3714

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:9999px)/";
  width: 9999px; }

And about line 1436

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:9999px)/";
  width: 9999px; }

Martin over 5 years ago

Alternatively, you can use an extend dropdown, and put the menu-icon in that.
You can set up links in it.

<a href="#" data-dropdown="drop5" class="large button dropdown expand">Dropdown Button</a>

<ul id="drop5" data-dropdown-content="" class="f-dropdown open" style="position: absolute; top: 617.0625px; left: 13.328125px;">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

i tried this but I only get the "Dropdown Button" when clicking on it nothing happens. The link items "This is a link" etc. do not show. Any idea?