Can't seem to get this to work in responsive layout, dropdown doesn't seem to be working... By default its down and showing all the links but won't collapse and expand like its meant to.
JS files seem to be loading fine.

Hopefully someone has some idea on this..
Thanks

CommentFileSizeAuthor
#4 top-bar-working.png36.74 KBishmael-sanchez

Comments

ishmael-sanchez’s picture

ishmael-sanchez commented
Category: bug » support
Status: Active » Postponed (maintainer needs more info)

Hmm I don't know if this is bug what navigation are you using on http://foundation.zurb.com/docs/navigation.php? I haven't used the Top Bar navigation how did you code this? The sub theme implements the Nav Bar so take a look at the template.php for how that's implemented or paste your code along with any related error messages. It's hard to debug if I don't have a reference.

jodym’s picture

jodym commented

Zurb Foundation Top Bar Navigation
Im using the following html in page.tpl.php with jquery.foundation.topbar.js ( it displays but dropdown just doesn't work ) is there something that has to go in template.php file?

<div class="row">
    <!-- Navigation -->
      <nav class="top-bar contain-to-grid">
        <ul>
          <li class="name"><h1><a href="#">Title</a></h1></li>
          <li class="toggle-topbar"><a href="#"></a></li>
        </ul>
        <section>
          <ul class="left">
              <li><a href="#">Link1</a></li>
              <li><a href="#">Link2</a></li>
          </ul>
          <ul class="right">
          <li class="search">
              <form>
                <input type="search">
              </form>
          </li>
            <li class="has-button">
            <a class="small button" href="#">Search</a>
          </li>
          </ul>
        </section>
    </nav>
    <!-- End Navigation -->
  </div>
ishmael-sanchez’s picture

ishmael-sanchez commented
Assigned: jodym » ishmael-sanchez
Status: Postponed (maintainer needs more info) » Active
ishmael-sanchez’s picture

ishmael-sanchez commented
Priority: Normal » Minor
Status: Active » Fixed
StatusFileSize
new top-bar-working.png36.74 KB

Ok something is wrong with your code or how you implemented it in your sub-theme, although your code didn't work for me I simply pasted the code from the foundation top bar example (http://foundation.zurb.com/docs/navigation.php) and it worked just fine in the theme (See screenshot).

<div class="row">
  <div class="twelve columns">
    <nav class="top-bar">
      <ul>
        <!-- Title Area -->
        <li class="name">
          <h1>
            <a href="#">
              Top Bar Title
            </a>
          </h1>
        </li>
        <li class="toggle-topbar"><a href="#"></a></li>
      </ul>

      <section>
        <!-- Left Nav Section -->
        <ul class="left">
          <li class="divider"></li>
          <li class="has-dropdown">
            <a class="active" href="#">Item 1</a>
            <ul class="dropdown">
              <li><label>Section Name</label></li>
              <li class="has-dropdown">
                <a href="#" class="">Level 1, Has Dropdown</a>
                <ul class="dropdown">
                  <li><a href="#">Level 2</a></li>
                  <li><a href="#">Level 2</a></li>
                  <li class="has-dropdown"><a href="#">Level 2, Has Dropdown</a>
                    <ul class="dropdown">
                      <li><label>Section</label></li>
                      <li><a href="#">Level 3</a></li>
                      <li><a href="#">Level 3</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Level 3</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Level 2</a></li>
                  <li><a href="#">Level 2</a></li>
                </ul>
              </li>
              <li><a href="#">Level 1</a></li>
              <li><a href="#">Level 1</a></li>
              <li class="divider"></li>
              <li><label>Section Name</label></li>
              <li><a href="#">Level 1</a></li>
              <li><a href="#">Level 1</a></li>
              <li><a href="#">Level 1</a></li>
              <li class="divider"></li>
              <li><a href="#">See all &rarr;</a></li>
            </ul>
          </li>
          <li class="divider hide-for-small"></li>
        </ul>

        <!-- Right Nav Section -->
        <ul class="right">
          <li class="divider show-for-medium-and-up"></li>
          <li class="has-dropdown">
            <a href="#">Item 2</a>
            <ul class="dropdown">
              <li><label>Section Name</label></li>
              <li><a href="#" class="">Level 1</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all &rarr;</a></li>
            </ul>
          </li>
        </ul>
      </section>
    </nav>
  </div>
</div>

Kindly double check your code or simply paste this working code into your page template. If the example code doesn't work in your sub theme something else in your Drupal site or sub theme is causing the issue but it doesn't seem to be an issue with the theme itself.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

nahid84’s picture

nahid84 commented

i need it