From: Geoff Kimball <geoff@zurb.com>
Date: Wed, 27 Jan 2016 17:35:12 +0000 (-0800)
Subject: Add explanation of .menu-text class to menu docs #8002
X-Git-Tag: v6.2.0~1^2~11
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9d0a6ff7b8fa83183c920cf42a0efff3c65aa6a8;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add explanation of .menu-text class to menu docs #8002
---

diff --git a/docs/pages/menu.md b/docs/pages/menu.md
index 5c4b6dd85..42e99ba4c 100644
--- a/docs/pages/menu.md
+++ b/docs/pages/menu.md
@@ -125,6 +125,21 @@ Add a new menu inside the `<li>` of a Menu and add the class `.nested` to create
 
 ---
 
+## Text
+
+Because the padding of the menu item is applied to the `<a>`, if you try to add an item that's text only, it will be misaligned. To get around this, add the class `.menu-text` to any `<li>` that doesn't have a link inside of it.
+
+```html_example
+<ul class="menu">
+  <li class="menu-text">Site Title</li>
+  <li><a href="#">One</a></li>
+  <li><a href="#">Two</a></li>
+  <li><a href="#">Three</a></li>
+</ul>
+```
+
+---
+
 ## Icons
 
 Menu items can have icons. Wrap the text of the item in a `<span>`, and then add an `<img>` element before the `<span>`. If you're using the Foundation icon font, the `<img>` will be an `<i>` instead.