From: harry Date: Sun, 21 May 2017 13:37:44 +0000 (+0530) Subject: More docs update! X-Git-Tag: v6.4.0-rc1~22^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10056%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git More docs update! --- diff --git a/docs/pages/top-bar.md b/docs/pages/top-bar.md index 925bf8784..d0592e773 100644 --- a/docs/pages/top-bar.md +++ b/docs/pages/top-bar.md @@ -54,7 +54,7 @@ In the below example, our top bar includes a [dropdown menu](dropdown-menu.html) ## Advanced Layout -

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.

+

To set up a Responsive menu with toggle click trigger on mobile, 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.

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.