From ce1e5c852291bed8d0f949a005f0129208c1c2aa Mon Sep 17 00:00:00 2001
From: Danielle Blank <dgdblank@users.noreply.github.com>
Date: Tue, 13 Dec 2016 13:39:20 -0800
Subject: [PATCH] Clarify data-toggle to use responsive-toggle

When trying to use the responsive-menu feature, I kept getting an error that '#' was not a valid method, because the element id was not being passed with data-toggle trigger. Added notes to clarify that the menu id should also be set on data-toggle: `data-toggle="MENUID"`.
---
 docs/pages/responsive-navigation.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/pages/responsive-navigation.md b/docs/pages/responsive-navigation.md
index 404373b6e..fb693de1f 100644
--- a/docs/pages/responsive-navigation.md
+++ b/docs/pages/responsive-navigation.md
@@ -65,7 +65,7 @@ For example, a drilldown menu works well on mobile, but on larger screens, you m
 
 In Foundation 5, the top bar combined this menu toggling concept into one plugin. We now have a separate, optional component you can use in tandem with the responsive plugin. It's called the title bar, and it allows you to quickly setup a menu toggle on mobile. The title bar hides itself on larger screens.
 
-To set it up, first give your menu a unique ID. (You don't even need to use Menu! Any element will work.) Next, add a title bar with the class `.title-bar` and the attribute `data-responsive-toggle`. The value of `data-responsive-toggle` should be the ID of the menu you're toggling.
+To set it up, first give your menu a unique ID. (You don't even need to use Menu! Any element will work.) Next, add a title bar with the class `.title-bar` and the attribute `data-responsive-toggle`. The value of `data-responsive-toggle` should be the ID of the menu you're toggling. Lastly, add `data-toggle` to the element that will trigger the toggle. The value of `data-toggle` should also be the ID of the menu you're toggling.
 
 By default, the title bar will be visible on small screens, and the Menu hides. At the medium breakpoint, the title bar disappears, and the menu is always visible. This breakpoint can be changed with the `data-hide-for` attribute in HTML, or the `hideFor` setting in JavaScript.
 
@@ -75,7 +75,7 @@ By default, the title bar will be visible on small screens, and the Menu hides.
 
 ```html_example
 <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
-  <button class="menu-icon" type="button" data-toggle></button>
+  <button class="menu-icon" type="button" data-toggle="example-menu"></button>
   <div class="title-bar-title">Menu</div>
 </div>
 
-- 
2.47.2