Menu icon Foundation

My Posts




My Comments

Barbara Schendel commented on Jozef Banuelos's post almost 4 years

I think it's made worse by the fact that we are "noobs" but that is not the whole problem -- I am a noob at package managers and javascript but not frameworks. The documentation is incomplete and often inaccurate, and in fact up until recently the drop-down menus on their own demo page did not even work properly. There is also still not a single word of documentation on Yeti installer.

I personally think they just launched F6 way too early.

Barbara Schendel commented on Jozef Banuelos's post almost 4 years

I have been at this for so many hours that I am slowly losing the will to live.
Ha!! Oh brother I am so very much on the same page. I was this close to going back to my own custom-coded css nav that I used before using Foundation.

I finally got it to work using the code below. But then I discovered another very important thing: you have to be sure you are using the most recent version of Foundation 6.1.2. I had a slightly older version (6.1 or something) and as a result none of the a links actually resulted in a page change. Tore out a bunch of hair and wasted many hours on that one. Zurb support on twitter very casually suggested updating and voila it worked. I can't believe they let F6 loose with such an important bug. Very, very, very frustrating.

I think a lot of people are having similar issues and confusion which prompted zurb to add this to the forums: http://foundation.zurb.com/forum/posts/38403-f6-responsive-menu-suggestions

I hope they can simplify things or at least put out some better resources soon.

The code I am using now is below, in case it is useful to you....
```HTML



Menu

  <ul id="nav-menu" class="vertical menu medium-horizontal" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
    <li>
      <a href="#">Item 1</a>
      <ul class="vertical menu">
        <li>
          <a href="http://google.com">Item 1A</a>
          <ul class="vertical menu">
            <li><a href="http://cnn.com">Item 1A</a></li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
            <li><a href="#">Item 1D</a></li>
            <li><a href="#">Item 1E</a></li>
          </ul>
        </li>
        <li><a href="#">Item 1B</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 2</a>
      <ul class="vertical menu">
        <li><a href="#">Item 2A</a></li>
        <li><a href="#">Item 2B</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 3</a>
      <ul class="vertical menu">
        <li><a href="#">Item 3A</a></li>
        <li><a href="#">Item 3B</a></li>
      </ul>
    </li>
  </ul>

```

nav.top-bar {background: $primary-color; color: white;
  a {color: white;}
  //hamburger icon
  .title-bar {background: $primary-color; color: white; padding-top: 20px; padding-bottom: 0;
    .menu-icon {vertical-align: top;}
    button.menu-icon {background: $primary-color;}
    button.menu-icon:hover::after {background:$white;}
    button.menu-icon::after {background: white; box-shadow: 0 7px 0 white, 0 14px 0 white;}

    button.menu-icon:hover::after {
        background: $primary-color;
        box-shadow: 0 7px 0 white, 0 14px 0 white;
    }
  }
  // arrows
  .js-drilldown-back::before {border-color: transparent $white transparent transparent;}
  .is-drilldown-submenu-parent>a::after {border-color:transparent transparent transparent $white;}
  // bgcolors
  .menu, .is-drilldown-sub  {background: $primary-color;
    li {background: $primary-color;
      a {color: white;}
    }
  }
  .is-drilldown {height:auto !important; /* try to override the javascript height, a stupid stupid hack which solves the big dumb gap showing up on mobile */}
  .is-dropdown-submenu-parent.is-right-arrow > a::after {border-color: transparent transparent transparent $white;}
  ul.first-sub {top:40px; left:0;} /* important this is needed if using F6.1.2 */
}

Barbara Schendel commented on Jozef Banuelos's post almost 4 years

I have to agree, the F6 nav bars have given me NO END of headaches. Several times I have thrown my hands up in the air and concluded they simply don't work.

Anyway that frustration aside, the styling issues you are having is probably because they only include the most minimal styles for menus in F6. They assume that you will style all the colors etc yourself in your css. (I took a F6 intro class with zurb and they explicitly said this) Their reasoning was that they figure we will write more concise and cleaner code by styling it ourselves, vs them including all of the styles that we have to overwrite. I will say that in F5 there were a boatload of very ugly styles to overwrite so they are probably correct in that it's fewer lines of code to just do it ourselves.

Barbara Schendel commented on Jozef Banuelos's post almost 4 years

I am happy to see someone else talking about this. I'm like you, not comfortable with grunt and bower and all the rest. (Actually I probably even more of a noob than you are when it comes to that) And I also thought it ridiculous that I ended up with 8000+ files (totaling something like 55MB) for a single install!

As for where the bower stuff comes from in the first place, here are the two ways I create a new install: either using CodeKit, or the Yeti installer. Both have the ability to create a brand new install of the most recent version of Foundation. CodeKit seems cleaner and easier though.

Now here is where I go my own way a bit. I don't bother with all the node_modules stuff that Yeti puts in there. Delete it! I barely even use bower_components. The Bower Components folder is only needed to compile your scss locally (so do keep it local for that). I am creating a WordPress theme from all of this and so all the bower/node stuff just gets in the way. So I simplify it down even further-- I grab /bower-components/foundation-sites/dist/foundation.min.js and app.js and then I put those into a nice tidy /js folder up at the root level, then call those directly in my document. Then when I move things over to my theme on the server, I leave the bower_components behind and just bring over the js and the compiled css (plus the other theme files). So I literally only have the bare essentials called directly, and no unused bloat.

And as for creating a new site locally, the bower_components is needed to compile sass but that only ends up to be ~300 items and < 3MB. So it's pretty manageable. Just delete the node_modules junk. I've survived happily without it. :)

Seasoned devs will most likely say I'm totally doing it wrong. That would not surprise me. But anyway I only am writing all this here because I just wanted to respond to let you know that you were not alone in thinking that this is WAY WAY more complicated than it seems like it needs to be. I was just ranting about this yesterday.

Barbara Schendel commented on Barbara Schendel's post almost 4 years

In case anyone else has this issue, I was able to solve this by updating to Foundation 6.1.2.

However doing this proceeded to introduce a new problem with the positioning of dropdown menus where the subs showed up to the right instead of below. I had to add the following to my stylesheet to fix: .top-bar ul.first-sub {top:40px; left:0}

Kind of amazing that such bugs as these existed in the first place.

Barbara Schendel commented on Barbara Schendel's post almost 4 years

Sorry for the duplicate content here. I have no idea why it posted it twice.

Barbara Schendel commented on Orabidoo's post almost 4 years

Good tip, thanks!

Barbara Schendel commented on Orabidoo's post almost 4 years

I have the exact same situation (using in WordPress) and I prefer keeping my custom stylesheet separate from app.css if possible. Does this mean that there is no way to get Yeti to compile my own style.scss to style.css? Shouldn't it be possible to just add style.scss to the gulp file somehow? (I know nothing about gulp so maybe not, just asking)

Barbara Schendel commented on Orabidoo's post almost 4 years

I am having a similar problem but I think it's because I have no idea how to use Yeti. How do I get it to recognize and compile my own sass files? I have placed style.scss into the Basis install's scss folder but it does not get compiled when I run gulp sass. I have version 1.0.1 of Yeti. Note that I am new to command line and gulp. I'm using the basic yeti install for this reason.

Barbara Schendel commented on Barbara Schendel's post almost 4 years

Thank you I am glad to know I am not crazy. Thank you also for reporting it to them.

I also tried the drilldown, again using the exact code they provide -- it is supposed to show as a horizontal menu on medium and drilldown on small -- but this also does not work. 1) it displays as a drilldown on all screen sizes, not just on small, and 2) the drilldown functionalty again does not work properly, see screenshot here https://nimbus.everhelper.me/client/notes/share/363486/QCgR3ogCBU9WOC8N35yBNWU1P6mRH1Ou/

The code used to create this menu was lifted directly from the F6 code demo, and is as follows:

<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
  <li class="has-submenu">
    <a href="#">Item 1</a>
    <ul class="vertical submenu menu" data-submenu id="m2">
      <li class="has-submenu">
        <a href="#">Item 1A</a>
        <ul class="vertical submenu menu" data-submenu id="m3">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 2</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 3</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

Thank you again for your help!

Posts Followed




  • 10
    Replies
  • Only app.scss is compiled (F6)

    By Orabidoo

    Sasscompiling

    Hello again, My previous post was marked as spam and removed so I'm giving it another shot. I'm coding mainly for WordPress and I'm used to having a seperate style.scss. All scss files have compiled just fine with earlier versions of Foundation but ... (continued)

    Last Reply by Ali THERA almost 3 years ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Jozef Banuelos's post almost 4 years

I think it's made worse by the fact that we are "noobs" but that is not the whole problem -- I am a noob at package managers and javascript but not frameworks. The documentation is incomplete and often inaccurate, and in fact up until recently the drop-down menus on their own demo page did not even work properly. There is also still not a single word of documentation on Yeti installer.

I personally think they just launched F6 way too early.

You commented on Jozef Banuelos's post almost 4 years

I have been at this for so many hours that I am slowly losing the will to live.
Ha!! Oh brother I am so very much on the same page. I was this close to going back to my own custom-coded css nav that I used before using Foundation.

I finally got it to work using the code below. But then I discovered another very important thing: you have to be sure you are using the most recent version of Foundation 6.1.2. I had a slightly older version (6.1 or something) and as a result none of the a links actually resulted in a page change. Tore out a bunch of hair and wasted many hours on that one. Zurb support on twitter very casually suggested updating and voila it worked. I can't believe they let F6 loose with such an important bug. Very, very, very frustrating.

I think a lot of people are having similar issues and confusion which prompted zurb to add this to the forums: http://foundation.zurb.com/forum/posts/38403-f6-responsive-menu-suggestions

I hope they can simplify things or at least put out some better resources soon.

The code I am using now is below, in case it is useful to you....
```HTML



Menu

  <ul id="nav-menu" class="vertical menu medium-horizontal" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
    <li>
      <a href="#">Item 1</a>
      <ul class="vertical menu">
        <li>
          <a href="http://google.com">Item 1A</a>
          <ul class="vertical menu">
            <li><a href="http://cnn.com">Item 1A</a></li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
            <li><a href="#">Item 1D</a></li>
            <li><a href="#">Item 1E</a></li>
          </ul>
        </li>
        <li><a href="#">Item 1B</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 2</a>
      <ul class="vertical menu">
        <li><a href="#">Item 2A</a></li>
        <li><a href="#">Item 2B</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 3</a>
      <ul class="vertical menu">
        <li><a href="#">Item 3A</a></li>
        <li><a href="#">Item 3B</a></li>
      </ul>
    </li>
  </ul>

```

nav.top-bar {background: $primary-color; color: white;
  a {color: white;}
  //hamburger icon
  .title-bar {background: $primary-color; color: white; padding-top: 20px; padding-bottom: 0;
    .menu-icon {vertical-align: top;}
    button.menu-icon {background: $primary-color;}
    button.menu-icon:hover::after {background:$white;}
    button.menu-icon::after {background: white; box-shadow: 0 7px 0 white, 0 14px 0 white;}

    button.menu-icon:hover::after {
        background: $primary-color;
        box-shadow: 0 7px 0 white, 0 14px 0 white;
    }
  }
  // arrows
  .js-drilldown-back::before {border-color: transparent $white transparent transparent;}
  .is-drilldown-submenu-parent>a::after {border-color:transparent transparent transparent $white;}
  // bgcolors
  .menu, .is-drilldown-sub  {background: $primary-color;
    li {background: $primary-color;
      a {color: white;}
    }
  }
  .is-drilldown {height:auto !important; /* try to override the javascript height, a stupid stupid hack which solves the big dumb gap showing up on mobile */}
  .is-dropdown-submenu-parent.is-right-arrow > a::after {border-color: transparent transparent transparent $white;}
  ul.first-sub {top:40px; left:0;} /* important this is needed if using F6.1.2 */
}

You commented on Jozef Banuelos's post almost 4 years

I have to agree, the F6 nav bars have given me NO END of headaches. Several times I have thrown my hands up in the air and concluded they simply don't work.

Anyway that frustration aside, the styling issues you are having is probably because they only include the most minimal styles for menus in F6. They assume that you will style all the colors etc yourself in your css. (I took a F6 intro class with zurb and they explicitly said this) Their reasoning was that they figure we will write more concise and cleaner code by styling it ourselves, vs them including all of the styles that we have to overwrite. I will say that in F5 there were a boatload of very ugly styles to overwrite so they are probably correct in that it's fewer lines of code to just do it ourselves.

You commented on Jozef Banuelos's post almost 4 years

I am happy to see someone else talking about this. I'm like you, not comfortable with grunt and bower and all the rest. (Actually I probably even more of a noob than you are when it comes to that) And I also thought it ridiculous that I ended up with 8000+ files (totaling something like 55MB) for a single install!

As for where the bower stuff comes from in the first place, here are the two ways I create a new install: either using CodeKit, or the Yeti installer. Both have the ability to create a brand new install of the most recent version of Foundation. CodeKit seems cleaner and easier though.

Now here is where I go my own way a bit. I don't bother with all the node_modules stuff that Yeti puts in there. Delete it! I barely even use bower_components. The Bower Components folder is only needed to compile your scss locally (so do keep it local for that). I am creating a WordPress theme from all of this and so all the bower/node stuff just gets in the way. So I simplify it down even further-- I grab /bower-components/foundation-sites/dist/foundation.min.js and app.js and then I put those into a nice tidy /js folder up at the root level, then call those directly in my document. Then when I move things over to my theme on the server, I leave the bower_components behind and just bring over the js and the compiled css (plus the other theme files). So I literally only have the bare essentials called directly, and no unused bloat.

And as for creating a new site locally, the bower_components is needed to compile sass but that only ends up to be ~300 items and < 3MB. So it's pretty manageable. Just delete the node_modules junk. I've survived happily without it. :)

Seasoned devs will most likely say I'm totally doing it wrong. That would not surprise me. But anyway I only am writing all this here because I just wanted to respond to let you know that you were not alone in thinking that this is WAY WAY more complicated than it seems like it needs to be. I was just ranting about this yesterday.

You commented on Barbara Schendel's post almost 4 years

In case anyone else has this issue, I was able to solve this by updating to Foundation 6.1.2.

However doing this proceeded to introduce a new problem with the positioning of dropdown menus where the subs showed up to the right instead of below. I had to add the following to my stylesheet to fix: .top-bar ul.first-sub {top:40px; left:0}

Kind of amazing that such bugs as these existed in the first place.

You commented on Barbara Schendel's post almost 4 years

Sorry for the duplicate content here. I have no idea why it posted it twice.

You commented on Orabidoo's post almost 4 years

Good tip, thanks!

You commented on Orabidoo's post almost 4 years

I have the exact same situation (using in WordPress) and I prefer keeping my custom stylesheet separate from app.css if possible. Does this mean that there is no way to get Yeti to compile my own style.scss to style.css? Shouldn't it be possible to just add style.scss to the gulp file somehow? (I know nothing about gulp so maybe not, just asking)

You commented on Orabidoo's post almost 4 years

I am having a similar problem but I think it's because I have no idea how to use Yeti. How do I get it to recognize and compile my own sass files? I have placed style.scss into the Basis install's scss folder but it does not get compiled when I run gulp sass. I have version 1.0.1 of Yeti. Note that I am new to command line and gulp. I'm using the basic yeti install for this reason.

You commented on Barbara Schendel's post almost 4 years

Thank you I am glad to know I am not crazy. Thank you also for reporting it to them.

I also tried the drilldown, again using the exact code they provide -- it is supposed to show as a horizontal menu on medium and drilldown on small -- but this also does not work. 1) it displays as a drilldown on all screen sizes, not just on small, and 2) the drilldown functionalty again does not work properly, see screenshot here https://nimbus.everhelper.me/client/notes/share/363486/QCgR3ogCBU9WOC8N35yBNWU1P6mRH1Ou/

The code used to create this menu was lifted directly from the F6 code demo, and is as follows:

<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
  <li class="has-submenu">
    <a href="#">Item 1</a>
    <ul class="vertical submenu menu" data-submenu id="m2">
      <li class="has-submenu">
        <a href="#">Item 1A</a>
        <ul class="vertical submenu menu" data-submenu id="m3">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 2</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 3</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

Thank you again for your help!

Posts Followed

Following

  • No Content

Followers

  • No Content