Menu icon Foundation
Login dropdown is breaking my layout

I've always loved how easy it is to customize foundation, as opposed to other css frameworks. This is the first time I've every actually gotten stuck trying to do something with foundation. What I'm trying to do is add a login dropdown to the topbar. When the dropdown is visible, it pushes this huge white margin over to the right of webpage. Is there any way to customize the dropdown content container so that it doesn't fly off the edge of the screen? Here's what I got going on right now:

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li>
        <a href="#" data-dropdown="login-dropdown">Has Content Dropdown</a>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

<div id="login-dropdown" class="f-dropdown small content" data-dropdown-content="true">
  <h5>Log In:</h5>
  <form id="top-nav-login" action="login.xqy" method="post">
    <div class="row">
      <label>Email Address</label>
      <input type="email" name="email" placeholder="email@example.com" tabindex="1"/>
    </div>
    <div class="row">
      <label>Password</label>
      <input type="password" name="email" placeholder="********" tabindex="2"/>
    </div>
    <div class="row">
      <input type="submit" class="button tiny success" value="Login" tabindex="3"/>
    </div>
  </form>
</div>
            

         

Screen shot 2014 06 20 at 5.36.38 am

dropdown

I've always loved how easy it is to customize foundation, as opposed to other css frameworks. This is the first time I've every actually gotten stuck trying to do something with foundation. What I'm trying to do is add a login dropdown to the topbar. When the dropdown is visible, it pushes this huge white margin over to the right of webpage. Is there any way to customize the dropdown content container so that it doesn't fly off the edge of the screen? Here's what I got going on right now:

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li>
        <a href="#" data-dropdown="login-dropdown">Has Content Dropdown</a>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

<div id="login-dropdown" class="f-dropdown small content" data-dropdown-content="true">
  <h5>Log In:</h5>
  <form id="top-nav-login" action="login.xqy" method="post">
    <div class="row">
      <label>Email Address</label>
      <input type="email" name="email" placeholder="email@example.com" tabindex="1"/>
    </div>
    <div class="row">
      <label>Password</label>
      <input type="password" name="email" placeholder="********" tabindex="2"/>
    </div>
    <div class="row">
      <input type="submit" class="button tiny success" value="Login" tabindex="3"/>
    </div>
  </form>
</div>
            

         

Screen shot 2014 06 20 at 5.36.38 am
Scott McPherson about 5 years ago

What i ended up doing to fix this was to extend the foundations dropdown styles—plus a few of my own, but I did not use foundation's dropdown.js to handle the position (So I removed the data-dropdown attributes). And I just wrote my own js to handle the position:

.login-dropdown {
  @extend .f-dropdown;
  padding: 20px;
  position: absolute;
  width: 100%;
  max-width: 300px;
}

I'm using Meteor, but one could just as easily use a jQuery click event to toggle the css

'click .login-dropdown-button': function(e) {
    var leftOffset = $(e.target).offset().left;
    var dropDown = $('.login-dropdown');
    if (! dropDown.hasClass('visible'))
      dropDown.addClass('visible').css({ left: leftOffset-185 });
    else
      dropDown.removeClass('visible').css({ left: -9999 });
},