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

diff --git a/docs/pages/menu.md b/docs/pages/menu.md
index 5c4b6dd85f13048b9a51f72656a56c1921a78654..42e99ba4caa491e32e08790c29e06b4273b8d6fa 100644 (file)
--- 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.