css - Foundation 4 css h1 の最初の文字のテキストを大文字に変換すると、トップバーの h1 名に文字が欠落する

Question

H1 の最初の文字をどこでも大文字にできるようにするために追加したカスタム CSS により、XYZ で始まるタイトルのトップバーの最初の文字「X」が消えます。

私は失敗しました：

.topbar:first-letter {
  text-transform: none !important;
}

.top-bar .name {
  text-transform: none !important;
}

---

<nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#"class="home" title="XYZ Business Lobby">XYZ Business Lobby</a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon        `enter code here`alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
 </ul>

フィドルを参照してください。