From dbfb21585804008acc7f5a389ee6c359f1e2c669 Mon Sep 17 00:00:00 2001 From: harry Date: Sun, 21 May 2017 15:46:22 +0530 Subject: [PATCH] Update Docs! --- docs/pages/top-bar.md | 66 ++++++++++++++++++------------------------- 1 file changed, 27 insertions(+), 39 deletions(-) diff --git a/docs/pages/top-bar.md b/docs/pages/top-bar.md index 6806093aa..925bf8784 100644 --- a/docs/pages/top-bar.md +++ b/docs/pages/top-bar.md @@ -54,53 +54,41 @@ In the below example, our top bar includes a [dropdown menu](dropdown-menu.html) ## Advanced Layout -You can further divide a top bar into a title area and content area. Use the `.top-bar-title` class to create a title/branding area. Next to that can be any element, which is used for the rest of the content. +

To set up a Responsive menu with toggle, first give your menu a unique ID. 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.

-```html -
-
-
-
-
-
-
-``` - -In the below example, we've combined the above pattern with the Responsive Toggler plugin, creating a responsive top bar with a toggle click trigger on mobile. +

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.

edit on codepen button
```html_example -
-
- - - - Site Title +
+ +
Menu
+
+ +
+
+
-
-
- -
-
-
    -
    • -
    • -
-
+
+
    +
    • +
    • +
``` -- 2.47.2