Develop Reference

Foundation Topbar Navigation - Do I use Toggler?

I want to be able to click links in my top bar to display different content. Do I need to explicitly use data-toggler on each tag in my top bar?This seems crazy. Is there an easier way to achieve the navigation I am looking for? Similar to the switcher for uikit? Thanks in advance as I am very new to the foundation.

You can put the dropdown menus in the wrappers that will be toggling their opacity/visibility so that when you :hover over the element, the menu will appear below it or wherever you want for it to as a matter of fact.
Here's the pen.

The behavior of Switcher reminds me of the tabs element of Foundation (Tabs | Foundation for Sites 6 Docs). Unlike the dropdown, the Tabs element remains visible after you click it, even if the mouse pointer moves out.

Close off-canvas nav when menu item clicked

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html
A few things I'm trying to accomplish here:
When you click anywhere except the menu item it closes the nav
When you click on a menu item it closes the nav and animates to an ID
The off-canvas nav appears only in it's mobile view. If you view the site on your desktop the nav does animate you to a specific ID, so I have some js there that I'm guessing could be used for the off-canvas one. I've read a few articles saying to use data-toggle but I couldn't get that to work.

So I figured I would chime in on this and offer a couple of solutions. If you are just trying to close the menu that you have in place currently when someone clicks on a link in your menu you could very simply either just use a click function to click menu button that you have there like so:
$('.navbar-collapse li a').on('click', function(){
$('input.checkbox-toggle').click();
});
Or you could probably just remove the checked from the checkbox like so:
$('.navbar-collapse li a').on('click', function(){
$('input.checkbox-toggle').prop('checked', false);
});
You may want to add an if statement so it only happens at mobile screen sizes so something like the following:
$('.navbar-collapse li a').on('click', function(){
if($(window).width() <= 767){
$('input.checkbox-toggle').prop('checked', false);
}
});
Or vice versa with the click function toggling the click above as well.
And then you could use your scrolling script that you already have in place and everything should work as you want it to.
Or
I see that on your site you are already using bootstrap. Bootstrap has a plugin built in that is called scrollspy that handles one page designs allowing you to scroll to sections and things of that nature. Using this instead of the script that you have in place may be a little more minimal and will serve you better because it will handle replacing active classes in your navbar as well. It may be much better for what you are trying to achieve with your site.
Also At the bottom I have placed a link to a jsfiddle demo that uses scrollspy along with an off canvas menu that is essentially the same thing that you are using in your site above except you can just use one menu for both large and mobile screens instead of placing two menus on your site. Look over this fiddle demo it has scrollspy in place and like I said instead of using two menus it just restyles the off canvas menu at mobile screens and uses jquery to toggle a class to the body of .menu-open when the menu button is pressed.
I wasn't quite sure if you wanted the same kind of overlay style of menu so I made it similar to the site that you have linked to above but if you want it to be a different type of off canvas style then you can just change the css to toggle it from the left or right or wherever.
Here is a link to the fiddle JSFiddle Demo
Anyway Hope this all helps and if you have any questions feel free to comment below.
P.S I noticed when looking at your page source that you have .container-fluid wrapping .containers throughout your page. This is not really necessary at all and is more than likely causing the horizontal scrollbar at the bottom. I'm not for sure but I just figured I would point this out to you.

How to show another navbar instead of dropdown menu using bootstrap

Instead of having individual navbar items having dropdown lists can I have the list shown as another extra navbar just below it?
something like how apple does here
http://www.apple.com/mac/

The best way to do this is to create a Div underneath your primary menu and to insert your sub-menu items inside that child div.
Of course, the actual implementation depends on the actual use case, the goals of the aesthetic and the user experience.
You could do a JS onClick event that will trigger the child dive to be inserted when hovering on the parent, or do it in pure CSS with a:hover and changing display of the other div.
Since you are asking specifically Bootstrap, the simplest implementation would be for you to grab a Mega Menu and tweak it to fit your Use Case.
YAMM is very good, all you would need to do to achieve what you want is to set a grid to your sub-menu items whilst having the sub-menu wrapper match the parent nav width.
Of course, I would recommend you read the documentation and understand how it is implemented and try to come up with your own solution to fit your particular Use Case.

Twitter bootstrap scrollspy - disable on smooth scroll?

We are using the twitter bootstrap scrollspy on a sidebar ul/il list, this works great.
We do however also use smooth scrolling when clicking the links in the sidebar.
This causes the scrollspy to highlight each and every element that comes into view, as it should in normal cases.
But when the scrolling is triggered by a click on the links in the side nav, the users most likely don't expect the menu to animate as the scrolling occurs.
Is there any way to temporarily disable the scrollspy while the animated scroll is running, and then reenable it once scrolling is complete?

By setting a class as the target of scrollspy you can dynamically stop/resume scrollspy operation.
$('body').scrollspy({ target: '.spy-active' });
Now one will just need to add or remove the .spy-active class on the navigation.

add the following to the top of your local javascript...
$.fn.scrollspy.Constructor.prototype.destroy = function(){
this.$element.off('scroll.bs.scroll-spy.data-api');
this.$body.removeData('bs.scrollspy');
return this.$body;
}

Why doesn't my drop-down menu stay visible when I hover over it?

Okay, so I've got two drop-down menus on my page, Navigation, and Links. Links works normally, but Navigation disappears when I try to hover over it. I got no idea why, so I'm asking.
Why does my Navigation menu disappear when I hover over it, and how do I fix it?
My site with the error

You have an element that's hanging over the left menu named #crwrap. So when moving your mouse to the Navigation options, the mouseout is triggered because you're suddenly hovering the #crwrap element instead of the Navigation menu. It's invisible but if you use a debugging tool that supports DOM searching you'll see it covering the area of the Navigation menu options.
It's not covering the Links menu so that one does not have any problems.
If you remove #crwrap (or move it to the background using z-index: -999), it works fine for me.

Your JS to show the menus is toggled by mouseover and mouseout of the elements in your menu section. The submenus are not nested inside these elements. Therefore, when you move the mouse down toward the submenu, you trigger the mouseout on the main menu item, which is hiding the submenu.
I would recommend nesting the submenu items inside the main menu item's container.
I would also advise you check out the excellent alistapart.com article about CSS hybrid menus. It has some excellent pointers and techniques you might find useful.