From 61cf8b76af6bf0f61174eca3cf9ed46aee6210a9 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Fri, 22 Jan 2016 13:36:29 -0800 Subject: [PATCH] Update top bar docs to show example of advanced top bar layout added in #7944 --- docs/pages/top-bar.md | 54 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 52 insertions(+), 2 deletions(-) diff --git a/docs/pages/top-bar.md b/docs/pages/top-bar.md index af81e0358..d36f9094c 100644 --- a/docs/pages/top-bar.md +++ b/docs/pages/top-bar.md @@ -19,9 +19,9 @@ In the below example, our top bar includes a [dropdown menu](dropdown-menu.html)
``` +--- + +## Advanced + +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. + +```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. + +```html_example +
+
+ + + + Site Title +
+
+
+ +
+
+
    +
    • +
    • +
+
+
+
+``` -- 2.47.2