Css bug with Navbar

I'am having an strange issue with a switch whenever it is inside my webs navbar, I`ve made a fiddle to replicate the issue: Issue replication

  <header>
    <div class="navbar-fixed">
      <nav style="background: #F30617" role="navigation">
        <div class="nav-wrapper">
          <a id="logo-container" href="@Url.Action(" Main ", "Home ")" class="brand-logo">
            <div class="flow-text title" style="white-space: nowrap;">Planning Cycle Dashboard</div>
          </a>
          <div class="switch" style="float: right">
            <label>
              <input type="checkbox" class="upsellActiveToggle" checked="checked"><span class="lever">                            
                         <span class="off center-align" style="color: white;">Today</span>
              <span class="on center-align" style="color: white;">Weekend</span>
              </span>
            </label>
          </div>



        </div>

      </nav>
    </div>
  </header>

  <main>
    <div class="switch">
      <label>
        <input type="checkbox" class="upsellActiveToggle" checked="checked"><span class="lever">
                    <span class="off">Today</span>
        <span class="on">Weekend</span>
        </span>
      </label>
    </div>
  </main>

And as you can see, what I want to achieve is the switch that is below the navbar.

My question is...why if it is working on the switch below the navbar it does not on the one that is inside the navbar? It has the same structure...it should work! Dont know why it pushes the text outside the switch!

Any ideas?

Solution

First of all, you have a typo in your html:

<span class="off center-align" style="color: white;">Today</span>
   <span class="on center-align" style="color: white;"></span>
   Weekend
</span>

See Weekend is out of the .on span? You would not miss it if you had made your code indented better.

Fix it first, then add:

.switch label .lever, .switch label .lever span {line-height:20px}

it will do the trick as without it they inherit line-height:56px from nav.