Menu icon Foundation
Problem with Responsive Toggle Navigation.

Portfolioscrshot

        <div class="title-bar" data-responsive-toggle="awesomeMenu" data-hide-for="medium">
            <button class="menu-icon" type="button" data-toggle></button>
            <div class="title-bar-title">
                <img src="img/jzfLogo-svg.svg">
            </div>
        </div>
        <div class="top-bar" id="awesomeMenu">
            <div class="top-bar-title">
                    <img class="logo" src="img/jzfLogo-svg.svg">
            </div>
            <div class="top-bar-right">
                <ul class="menu align-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
            

         

I am trying to use the Responsive Toggle to hide the horizontal menu on small screens, but it's not working! I've looked at the docs again and again, and my code is the same as what is shown in the docs. Unless there is something I'm missing? I tried putting the ID "awesomeMenu" onto div.top-bar-right, I thought that might work since the menu is a direct child to it and not to div.top-bar but that didn't work.

The title bar shows, but it doesn't hide the top bar, and clicking on the toggle button does nothing. It just stays above the top bar on all screen sizes. I need an adult!

responsive navresponsive navigationnavnavigationtoggleresponsive togglemenutitletitle bar

Portfolioscrshot

        <div class="title-bar" data-responsive-toggle="awesomeMenu" data-hide-for="medium">
            <button class="menu-icon" type="button" data-toggle></button>
            <div class="title-bar-title">
                <img src="img/jzfLogo-svg.svg">
            </div>
        </div>
        <div class="top-bar" id="awesomeMenu">
            <div class="top-bar-title">
                    <img class="logo" src="img/jzfLogo-svg.svg">
            </div>
            <div class="top-bar-right">
                <ul class="menu align-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
            

         

I am trying to use the Responsive Toggle to hide the horizontal menu on small screens, but it's not working! I've looked at the docs again and again, and my code is the same as what is shown in the docs. Unless there is something I'm missing? I tried putting the ID "awesomeMenu" onto div.top-bar-right, I thought that might work since the menu is a direct child to it and not to div.top-bar but that didn't work.

The title bar shows, but it doesn't hide the top bar, and clicking on the toggle button does nothing. It just stays above the top bar on all screen sizes. I need an adult!

Wyeth Myers almost 4 years ago

On "data-hide-for=", change 'medium' to 'small'.

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="small">

Jozef Banuelos almost 4 years ago

@Wyeth Myers Unfortunately that didn't work. I am so confused by this, do you think it might have something to do with the JS?

        <script src="js/jquery.min.js"></script>
        <script src="js/foundation.min.js"></script>
        <script src="js/foundation.util.mediaQuery.js"></script>
    </body>
</html>

Wyeth Myers almost 4 years ago

Ahh, now I see what the issue is...change:

        <script src="js/jquery.min.js"></script>

to

        <script src="js/vendor/jquery.min.js"></script>

Made a video as well, excuse the background noise.
https://www.dropbox.com/s/exzi0o61yc46wz3/Screencast%202016-01-28%2014%3A58%3A14.mp4?dl=0

Rafi Benkual almost 4 years ago

@Wyeth Myers Good catch! And nice video!

Jozef Banuelos almost 4 years ago

@Wyeth Myers It worked! Wow, talk about overlooking something. Thank you so much Wyeth!

Wyeth Myers almost 4 years ago

@Jozef Banuelos You're welcome and good luck with your site.

@Rafi Benkual As usual, you never fail to compliment which makes you amazing and thank you.

Pentool over 3 years ago

I am having the same issue. The problem is, there's no "vendor" folder in the downloaded foundation folders.

I think my major problem is that nowadays everything is grunt/gulp/npm/node/bower and such when it comes to front-end dev. I don't have experience with those so I've been trying to catch up with them in the past month or so., Still, I find them confusing, insanely bloated and a major headache for trying to achieve something simple. I really don't like to use any of those tools/technologies because everything has a dependency and I end up with 6,000 files, scattered all over in dependency folders.

Why can't I simply download a zipped EVERYTHING that includes the sass files with the latest and greatest, including the "vendor" js files in one go?

I do have npm and foundation-cli installed. Doing an "npm install foundation" or "npm install foundation-cli" will not install the sass workflow.

When I download the "complete" package (from http://foundation.zurb.com/sites/download.html/#customizeFoundation), that does give me the "vendor" folder for the necessary js, but, again, it does not create the sass workflow.

It seems that in order to create a sass workflow, git is required (as pointed out in the docs). I don't want to install git because I am using SourceTree, which is already a git client. But I can't input the git URL for the correct sass workflow location (which would also include the "vendor" js folder" because I don't know what it the correct git URL.

The git URLs mentioned at http://foundation.zurb.com/sites/docs/installation.html or only pointing to templates and none of them templates include the "vendor" specific js folder.

I know am just a noob trying to get this started, but so far I find this workflow so convoluted, complex, and bloated and I have no understanding why would anyone use this!? What happened a the simple workflow:

  1. Zip all the required files (for a sass workflow, and the required "vendor" specific js files) and place the package somewhere that I can download it.
  2. Download the zip file
  3. Extract
  4. Grab the needed files and go.

What could I be possibly missing for this simple workflow?

Do you have any recommendation where can I download the foundation project files that

  1. Use the sass workflow
  2. Include the necessary "vendor" folder with the correct js file?

Thanks.

Wyeth Myers over 3 years ago

@ [email protected] , I usually use the CSS version as it suits my needs however, you could try this.

Paste this before the closing body tag.

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="js/app.js"></script>

Pentool over 3 years ago

Thanks for the response! But I don't think we are on the same page. Where did "bower_components" came from? There's no such directory. I downloaded foundation 4 different ways and none of them has "bowwer_components" directory.

The various download methods can be found on this page:
http://foundation.zurb.com/sites/download.html/#customizeFoundation

Download method 1:
Use the "Complete" download.

Download method 2:
Use the "Essential" download.

Download method 3:
Use "Custom" and include all assets.

Download method 4:
Install via SCSS. Well, I outlined my frustration with that method above, but let's grab the templates from...

Basic Template:
http://foundation.zurb.com/sites/docs/installation.html
This doesn't have any "bower_components" folder.

Or let's go with the ZURB Template:
https://github.com/zurb/foundation-zurb-template
That doesn't have a folder called "bower_components" either.

Download method 5:
At this point my agony and frustration is a tad much for trying to make this simple responsive menu working for about 4-5 hours now. But let's continue...

At the Terminal install foundation as such:
npm install foundation
Nope. No "bower_components" folder in sight.

Download method 6:
Let's take it one step further. Again, at the Terminal enter:
npm install foundation-sites
Again, no "bower_components" folder.

So where, in your example, does the folder "bower_components" comes from?

However...

At this point, I am really frustrated and so I started a new blank project. Not that my previous attempt was any complicated, since it only had a simple grid and I was just trying to add a responsive menu to the page. So...

  1. Go to this page and download the "Complete" package:
    http://foundation.zurb.com/sites/download.html/#customizeFoundation

  2. Go to this documentation page: http://foundation.zurb.com/sites/docs/responsive-navigation.html and copy the last sample code in the box at the very bottom of the page (under the "Responsive Toggle" heading.)

  3. Go to the html page that you just downloaded with the "Complete" package, and remove everything from the tag (except the javascript stuff at the bottom) and paste the sample code from the documentation page.

IT DOESN'T WORK!

When you change the browser window width to very narrow, the menu is not changing to the black, responsive/mobile style menu. It does changing on the documentation page itself, but not when you copy/paste the sample code into the downloaded "Complete" template.

FRUSTRATING! VERY FRUSTRATING!

PS: I am using Safari 9.0.3 on the Mac (El Crapitan 10.11.3) but this should not make any difference, I believe.

Rafi Benkual over 3 years ago

There is a Sass version and a CSS version.

The CLI's dependancies for now are:
- Git
- Node
- Bower (for now until the next version of Node is released)

BTW - Bower only works with Git commands.

If you have Node, you can use the npm install method (this method does not require Git)
npm install foundation-sites

You asked:

Why can't I simply download a zipped EVERYTHING that includes the sass files with the latest and greatest, including the "vendor" js files in one go?

That would be fine - for people who don't use package managers. Package managers allow you to not only get a project that is scaffolded from the start but also updates easily with one command. Doing this manually yourself would require knowledge about setting up file locations and imports and time consuming updates that require dragging files here and there.

So from what I heard you saying, including a simple download of the Sass version without any build process would be you preferred method to install?

Pentool over 3 years ago

Thanks for the reply Rafi.

So from what I heard you saying, including a simple download of the Sass version without any build process would be you preferred method to install?

That is correct. It's an option. Currently a "simple" install of everything produces a folder with over 9,800 files in it!!! That's nearly ten thousand files! This does not include the already globally installed npm/node universe, the foundation-cli, and their respective modules.

After nearly 7 hours of frustration today, I was able to finally install everything and do a build at the Terminal. So 7 hours and 10,000 files got me a simple starting index.html file that has some basic foundation elements featured (to start out with). I believe this is what it's called the "template".

From this point, it took me less than 5 minutes to weed out all the build files, the modules, the various invisible files stored in various directories, which reduced the 9,800 files to only 181. This included all javascript and scss files.

I created a simple npm build file (using npm init) to create a script to run sass to compile and minify the scss files I need. In the main "foundation.scss" file I can quickly comment out all the scss imports I am not using, save, sass will auto compile and spit out the final css. Done.

As long as I am doing development, I don't need to uglify the js file(s) so I can leave them as is. I only had to copy a TOTAL of 4 files (out of the 9,800) that I need: foundation.min.css, foundation.min.js, jquery.min.js, and what-input.min.js. (This last one is optional.) Once I get to the point that the site is production ready, I can simply take the two js files (or even if I have more) and copy paste them into an online js concatenator/uglifier. Takes less then a minute and I have a single js file to work with - just for those who will nitpick about the extra http request(s).

During development, I can put all my project specific styles in a separate scss file and just watch that single file to recompile with sass. Done. It's not rocket science. For me, I can't justify having 10,000 files as "templates" for a project. If I create 10 simple websites (even if each has only a single page), that's already 100,000 files (NOT counting the actual site pages)!

So someone please tell me that I am a retard (which I am), because I just don't see the forest from the trees with all this build processes that needs zillions of build files and packages and winter tires, etc, what have you.

Maybe as I work more with foundation, at some point I will see the light at the end of the tunnel and realize that yes, I do indeed need two-hundred-forty-nine-thousand-five-hundred-and-twenty-three files for a template project that only consists of a single page. But right now, I'm still in the dark :-)

Barbara Schendel over 3 years ago

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.

Jon B over 3 years ago

Hi there,

I am having similar problems to this trying to get some of the menus from the Building Blocks section of the site to work. I too am a new arrival to the world of npm, bower, sass etc etc. It's a whole new world indeed and it does seem rather complicated but that's life.

However, my problem is this.

I have created a Test site using Yeti to create a basic "Foundation for Sites" site, just to experiment.

I understand how the .scss files work,, and I have added my own .scss file into the mix and included it in scss/app.scss file so that it is compiled along with all the standard foundation stuff.

Apart from that, I have changed nothing at all.

I take the HTML from say the "F6 Top Bar" building block and insert into index.html on the Yeti created site.

I take the SCSS from the F6 Top bar and insert it into my JB.SCSS file for inclusion with the SASS compilation.

Yeti compiles the SASS successfully.

And the result? - There is no black menu bar, just black areas where SITE and ONE TWO THREE showing. The drop downs seem to work ok, but the styling for the menu bar does not.

This happens with ALL the menu building blocks that I have tried.

What is weird is that other building blocks seem to work fine.

I have changed nothing at all. My JS calls at the end of the index.html have not changed - the only thing I have changed is the addition of the HTML shown in the building blocks. I have tried to stick with the Yeti created code as much as possible.

I have spent a couple of days playing with this to no avail. How come this stuff just does not seem to work "straight out of the box"?

Can anyone help? I really like the look of Foundation and I love the SASS stuff and the way Yeti compiles it in the background, but this menu stuff is doing my head in!

Thanks for any help.

Barbara Schendel over 3 years ago

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.

Wyeth Myers over 3 years ago

Old school is sometimes gold school, hence I stick to CSS.

Anyone interested in getting their F6 nav bar in place, here's something to help to help.

  <div  class="title-bar"  data-responsive-toggle="main-menu"  data-hide-for="medium">
    <button  class="menu-icon"  type="button"  data-toggle=""></button>
      <div  class="title-bar-title">Menu</div>
  </div>
  <div  class="top-bar"  id="main-menu">
    <div  class="top-bar-left">
      <a href="#"><img src="" alt="" width="" height=""></a>
    </div>
    <div  class="top-bar-right">
      <ul  class="menu vertical medium-horizontal"  data-responsive-menu="drilldown medium-dropdown">
                                <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>  
           <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>

Jon B over 3 years ago

Barbara and Wyeth

Thank you both very much indeed for your replies - they are much appreciated.

Barbara, your comment was very useful. It's a bit bizarre that one has to do a course with Zurb to find that rather useful nugget of information out...

I do think it is somewhat ingenuous to assume that people are going to style the menu bars themselves. Nowhere in the documentation does it say that one has to do that - and certainly with the Building Blocks one would assume that ALL the blocks are complete and set up to recreate what they show onscreen. This does make me think that I am missing a trick, but I have been at this for so many hours that I am slowly losing the will to live.

Anyway, I shall explore further.

Wyeth - thank you for the styling help. It's very useful, but I am frustrated that it is necessary!

JB

Barbara Schendel over 3 years ago

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 */
}

Jon B over 3 years ago

Barbara, you're a Godsend!

I shall try all your suggestions this evening as soon as I've had my tea!

I was interested in Foundation precisely to get away from using my own badly written and poorly constructed CSS! :-)

There seems to be a bit of a disconnect between the claims that the Zurb guys are making about Foundation, and what noobs like myself and others are actually experiencing. I suspect it's the classic trap that we all fall into - when we are in our comfort/knowledge zone we just assume so much about what others will know or understand, and it's only when our safe world ends up interacting with new users with NO knowledge of our products that all the bugs and gotchas start to appear!

Thanks so much for taking the time to post. Really appreciated.

JB

Barbara Schendel over 3 years ago

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.

Jon B over 3 years ago

Good point.

It contrasts greatly with the reviews coming out about Bootstrap 4.0 - apparently the documentation for that is excellent, and I am beginning to wonder why I am putting myself through all this hassle. After all, the aim is to create websites, not be brilliant at figuring out every nuance of a framework! I seem to be spending a LOT of time blundering around getting very little actually produced!

As for Yeti - it's great but I really have very little idea of what it's doing behind the scenes - I love the SASS stuff but once again all this package manager and script stuff just feels like a distraction from actually getting a website created.

Hey ho, we stumble along. Do the Zurb guys read much of this stuff?

Thanks again for your comments - supremely helpful.

JB