Foundation 6 topbar dropdowns under

Question

I am looking at the new Foundation 6 for Sites. I have set up a responsive topbar combining accordion on small devices, and dropdown on medium and up.

My problem is that I'm can't figure out how to show the submenus under the topbar, instead of to the right of the menu item.

Anyone got an idea? I have no idea where to start. Thanks in advance :)

Screenshot of how it looks now

I attached my HTML and SCSS.

/// Media query to show full menu
/// @type String
$topbar-breakpoint:medium !default;
// Navigation background
$navigation-background:$white;
 $navigation-font-color:$primary-color;
 $navigation-font-hover-color:$white;
 $navigation-border-bottom-height:4px; // adjust $navup-desktop-height/$navup-mobile-height accordingly
$navigation-border-bottom-type:solid; // dotted, double, solid, dashed
$navigation-border-bottom-color:$medium-gray;
 $navigation-menu-item-background-active:scale-color($primary-color,
$lightness:90%);
/// Logo bar
$logo-height-desktop:2rem;
 $logo-padding-desktop:$global-margin;
 $logo-bar-background:$navigation-background;
// Navup
$navup-mobile-height:113px;
 $navup-desktop-height:132px;
 $desktop-nav-background:$navigation-background;
 $desktop-submenu-background-hover:$navigation-background;
 $desktop-submenu-level1-background:scale-color($desktop-nav-background,
$lightness:0%);
 $desktop-submenu-level2-background:scale-color($desktop-nav-background,
$lightness:0%);
 $desktop-submenu-level3-background:scale-color($desktop-nav-background,
$lightness:0%);
 $desktop-submenu-level4-background:scale-color($desktop-nav-background,
$lightness:0%);
 $desktop-submenu-level5-background:scale-color($desktop-nav-background,
$lightness:0%);
 $desktop-submenu-border:1px solid $navigation-font-color;
 $desktop-menu-has-submenu-padding:1.5rem 1.5rem 1.5rem 1rem;
 $desktop-menu-padding:1.5rem;
// Vars: Desktop menu-items border
$desktop-menu-item-border-bottom:$navigation-border-bottom-height $navigation-border-bottom-type $dark-gray;
 $desktop-menu-item-border-bottom-hidden:$navigation-border-bottom-height $navigation-border-bottom-type $navigation-background;
 $desktop-menu-item-border-bottom-hover:$navigation-border-bottom-height $navigation-border-bottom-type $navigation-font-color;
// Vars: Desktop menu-items active (border and background)
$desktop-menu-item-background-active:none;
 $desktop-menu-item-border-bottom-active:$navigation-border-bottom-height $navigation-border-bottom-type $navigation-font-color;
 $mobile-nav-background:$navigation-background;
 $mobile-submenu-padding:1.5rem;
 $mobile-submenu-background:$navigation-background;
 $mobile-submenu-level1-background:scale-color($mobile-submenu-background,
$lightness:-0%);
 $mobile-submenu-level2-background:scale-color($mobile-submenu-background,
$lightness:-0%);
 $mobile-submenu-level3-background:scale-color($mobile-submenu-background,
$lightness:-0%);
 $mobile-submenu-level4-background:scale-color($mobile-submenu-background,
$lightness:-0%);
 $mobile-submenu-level5-background:scale-color($mobile-submenu-background,
$lightness:-0%);
 $mobile-submenu-background-hover:scale-color($mobile-nav-background,
$lightness:-5%);
 $mobile-submenu-font-color-hover:$white;
 $mobile-menu-item-background-active:$navigation-menu-item-background-active;
 $menu-button-background:$white;
 $menu-button-color:$primary-color;
 $menu-button-padding:1rem;
 $menu-button-size:49px;
 header.navigation-custom {
  box-shadow: 0px 0px 8px 0 rgba($black, .2);
  position: fixed;
  width: 100%;
  background: $navigation-background;
  z-index: 1001;
  top: 0;
  transition: top .3s ease-in-out;
  border-bottom: $navigation-border-bottom-height $navigation-border-bottom-type $primary-color;
  @include breakpoint($topbar-breakpoint) {
    border-bottom: $navigation-border-bottom-height $navigation-border-bottom-type $navigation-border-bottom-color;
  }
  // Mobile styling
  // Menu styling
  .top-bar {
    background: none;
    z-index: 99999;
    bottom: 0;
    //// Submenu nested
    // Top level
    .menu {
      ul {
        background: none;
      }
      li {
        background: $mobile-submenu-background;
        &.menu-item.active {
          background: $mobile-menu-item-background-active;
        }
        &:hover {
          background: $mobile-submenu-background-hover;
        }
      }
      // Padding
      li:not(.menu-text) > a {
        padding: $mobile-submenu-padding;
        &: : after {
          right: 1.5rem;
        }
      }
      // Level 1
      .submenu.nested {
        text-indent: 1rem;
        li {
          background: $mobile-submenu-level1-background;
          &: hover {
            background: $mobile-submenu-background-hover;
          }
          a {
            &: : after {
              text-indent: 0;
            }
          }
          &:first-child {
            box-shadow: $global-box-shadow-inset;
          }
        }
        // Level 2
        .submenu.nested {
          text-indent: 1.5rem;
          li {
            background: $mobile-submenu-level2-background;
            &: hover {
              background: $mobile-submenu-background-hover;
            }
          }
          // Level 3
          .submenu.nested {
            text-indent: 2rem;
            li {
              background: $mobile-submenu-level3-background;
              &: hover {
                background: $mobile-submenu-background-hover;
              }
            }
            // Level 4
            .submenu.nested {
              text-indent: 2.5rem;
              li {
                background: $mobile-submenu-level4-background;
                &: hover {
                  background: $mobile-submenu-background-hover;
                }
              }
              // Level 5
              .submenu.nested {
                text-indent: 3rem;
                li {
                  background: $mobile-submenu-level5-background;
                  &: hover {
                    background: $mobile-submenu-background-hover;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  // Desktop specific styling
  @include breakpoint($topbar-breakpoint) {
    // Menu styling
    .top-bar {
      bottom: -$navigation-border-bottom-height;
      //// Submenu nested
      // Top level
      .menu {
        background: none;
        li.menu-item {
          border-bottom: $desktop-menu-item-border-bottom;
          &: hover {
            border-bottom: $desktop-menu-item-border-bottom-hover;
          }
          &.active {
            background: $desktop-menu-item-background-active;
            border-bottom: $desktop-menu-item-border-bottom-hover;
          }
        }
        li {
          background: none;
          &: hover {
            background: $desktop-submenu-background-hover;
          }
          &.main-items {
            &: hover {
              background: none;
            }
          }
        }
        > li:not(.logo) > a {
          // border-bottom: 4px double red;

        }
        // Padding
        li.has-submenu:not(.menu-text) > a {
          padding: $desktop-menu-has-submenu-padding;
        }
        li:not(.menu-text) > a {
          padding: $desktop-menu-padding;
        }
        // Level 1
        .submenu.nested {
          text-indent: 0rem;
          border: $desktop-submenu-border;
          li {
            background: $desktop-submenu-level1-background;
            border-bottom: $desktop-menu-item-border-bottom-hidden;
            &: hover {
              background: $desktop-submenu-background-hover;
              border-bottom: $desktop-menu-item-border-bottom-hover;
            }
            &:first-child {
              box-shadow: none;
            }
          }
          // Level 2
          .submenu.nested {
            text-indent: 0rem;
            li {
              background: $desktop-submenu-level2-background;
              &: hover {
                background: $desktop-submenu-background-hover;
              }
            }
            // Level 3
            .submenu.nested {
              text-indent: 0rem;
              li {
                background: $desktop-submenu-level3-background;
                &: hover {
                  background: $desktop-submenu-background-hover;
                }
              }
              // Level 4
              .submenu.nested {
                text-indent: 0rem;
                li {
                  background: $desktop-submenu-level4-background;
                  &: hover {
                    background: $desktop-submenu-background-hover;
                  }
                }
                // Level 5
                .submenu.nested {
                  text-indent: 0rem;
                  li {
                    background: $desktop-submenu-level5-background;
                    &: hover {
                      background: $desktop-submenu-background-hover;
                    }
                  }
                }
              }
            }
          }
        }
      }
      // Float right bar to right
      .top-bar-right {
        margin-left: auto;
      }
    }
  }
  // General styling
  .top-bar {
    position: relative;
    z-index: 1000;
    .menu {
      &.nested {
        margin-left: 0rem;
      }
      li {
        a {
          color: $navigation-font-color;
        }
      }
      .submenu {
        li {
          &.active {
            background: $navigation-menu-item-background-active !important;
          }
        }
      }
    }
    // Downarrow desktop
    .menu.menu-items {
      > .is-dropdown-submenu-parent.is-right-arrow {
        & > a: : after {
          border: none;
          font-family: 'FontAwesome';
          content: '\f078';
          margin-top: 4px;
          font-size: 10px;
        }
      }
    }
    // Rightarrow desktop
    .menu {
      > .is-dropdown-submenu-parent.is-right-arrow {
        & > a: : after {
          border: none;
          font-family: 'FontAwesome';
          content: '\f054';
          margin-top: 4px;
          font-size: 10px;
        }
      }
    }
    // Downarrow mobile
    .menu {
      .is-accordion-submenu-parent {
        > a: : after {
          border: none;
          font-family: 'FontAwesome';
          content: '\f078';
          font-size: 10px;
          margin-top: -4px;
        }
      }
      .is-accordion-submenu-parent[aria-expanded='true'] {
        > a {
          font-weight: 700;
          &: : after {
            margin-top: 4px;
          }
        }
      }
    }
  }
  // logo-bar
  .logo-bar {
    background: $logo-bar-background;
    text-align: center;
    @include flex-grid-row;
    @include flex-grid-row-align(null, middle);
    .logo-container, .social-container {
      @include flex-grid-column(6, null);
    }
    .menu.logo {
      background: none;
      li.logo {
        a {
          padding-top: $logo-padding-desktop;
          padding-bottom: $logo-padding-desktop;
          padding-left: 0;
          padding-right: 0;
        }
        img {
          max-height: $logo-height-desktop;
        }
        &:hover {
          background: none;
        }
      }
    }
    .social-container {
      ul.social-icons {
        float: right;
        background: none;
        @include breakpoint(medium) {
          margin-right: 3rem;
        }
        @include breakpoint(1400) {
          margin-right: 0;
        }
        li {
          background: none;
          &: hover {
            background: none;
          }
        }
      }
    }
  }
  .title-bar {
    position: relative;
    padding: 0;
    background: $mobile-nav-background;
    button.menu-button {
      height: $menu-button-size;
      width: $menu-button-size;
      padding: $menu-button-padding;
      background: $menu-button-background;
      color: $menu-button-color;
    }
    .title-bar-right {
      position: relative;
    }
  }
  // Search field
  .title-bar--search-field,
  .title-bar--search-button {
    margin-bottom: 0;
    height: 49px;
    @include breakpoint($topbar-breakpoint) {
      height: rem-calc($logo-height-desktop + ($logo-padding-desktop * 2));
    }
  }
  input[type='text'].title-bar--search-field {
    padding: 0 1rem;
    width: 70%;
    float: right;
    border: 0;
    box-shadow: none;
    background: $light-gray;
    @include breakpoint($topbar-breakpoint) {
      padding: 0 1.5rem;
      width: 50%;
    }
  }
  .title-bar--search-button {
    top: 0;
    right: 0;
    position: absolute;
    z-index: 2;
    @include breakpoint($topbar-breakpoint) {
      i.fa-search {
        position: relative;
        top: 25%;
      }
    }
    .icon-search {
      top: 0;
    }
  }
  .title-bar--search-field.absolute {
    position: absolute;
    top: 0;
    right: 0;
    height: rem-calc($logo-height-desktop + ($logo-padding-desktop * 2));
    width: 500px;
  }
  &.nav-up {
    top: -$navup-mobile-height;
    @include breakpoint($topbar-breakpoint) {
      top: -$navup-desktop-height;
    }
  }
}
// Nav-up 
// navup-body
body {
  padding-top: $navup-mobile-height;
  @include breakpoint($topbar-breakpoint) {
    padding-top: $navup-desktop-height;
  }
}

<!-- Navigation-custom start -->
<header class="navigation-custom">

  <!-- Top bar top start -->
  <div class="logo-bar">
    <!-- Logo container start -->
    <div class="logo-container">
      <ul class="clean-list menu logo">
        <li class="logo">
          <a href="index.html">
            <img src="assets/img/ht-logo-dark.png" alt="logo">
          </a>
        </li>
      </ul>
    </div>
    <!-- Logo container end -->
  </div>
  <!-- Top bar top end -->

  <!-- Mobile navigation start -->
  <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
    <button type="button" class="menu-button" data-toggle><i class="fa fa-bars"></i>
    </button>
    <a class="title-bar--search-button button alert"><i class="fa fa-search"></i></span></a>
    <input class="title-bar--search-field" type="text" placeholder="Hva leter du etter?">
  </div>
  <!-- Mobile navigation end -->

  <!-- Desktop navigation start -->
  <div class="top-bar" id="main-menu">
    <div class="row">
      <!-- Top bar bottom end -->
      <div class="top-bar-left show-for-medium">
        <!-- <ul class="dropdown menu menu-items" data-dropdown-menu>
    					<li class="logo"><a href="index.html"><img src="assets/img/ht-logo-dark.png" alt="logo"></a></li>
    				</ul> -->
      </div>
      <div class="top-bar-left">
        <ul class="menu menu-items vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
          <!-- Level one -->
          <li class="has-submenu menu-item active">
            <a href="#">Sider</a>
            <ul class="submenu menu vertical nested" data-submenu>
              <!-- Level two -->
              <li class="has-submenu active">
                <a href="#">Sidebyggeren</a>
                <ul class="submenu menu vertical nested">
                  <!-- Level three -->
                  <li class="active"><a href="pageBuilder--gallery.html">Galleri</a>
                  </li>
                  <li><a href="pageBuilder--slideshow.html">Slideshow</a>
                  </li>
                  <li><a href="pageBuilder--links-grid.html">Links-grid</a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu">
                <a href="products-overview.html">Produkter</a>
                <ul class="submenu menu vertical nested">
                  <!-- Level three -->
                  <li><a href="products-overview.html">Alle produkter</a>
                  </li>
                  <li><a href="#">Kategori 1</a>
                  </li>
                  <li><a href="#">Kategori 2</a>
                  </li>
                  <li><a href="#">Kategori 3</a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu">
                <a href="services-overview.html">Tjenester</a>
                <ul class="submenu menu vertical nested">
                  <!-- Level Three -->
                  <li><a href="services-overview.html">Alle tjenester</a>
                  </li>
                  <li><a href="services-detail.html">Tjeneste 1</a>
                  </li>
                  <li><a href="services-detail.html">Tjeneste 2</a>
                  </li>
                  <li><a href="services-detail.html">Tjeneste 3</a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu">
                <a href="information-section.html">Informasjonsstruktur</a>
                <ul class="submenu menu vertical nested">
                  <!-- Level Three -->
                  <li><a href="information-section.html">Informasjonsside 1</a>
                  </li>
                  <li><a href="information-section.html">Informasjonsside 2</a>
                  </li>
                  <li><a href="information-section.html">Informasjonsside 3</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu menu-items vertical medium-horizontal">
          <li class="menu-item"><a href="news-overview.html">Nyheter</a>
          </li>
          <li class="menu-item"><a href="about.html">Om oss</a>
          </li>
          <li class="menu-item"><a href="contact.html">Kontakt</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Desktop navigation start -->

</header>

Answer 1

Your issue looks similar to mine with navigation/menu structure and F6: I need to combine the functionalities of the "Dropdown Menu" AND the "Responsive Navigation". Using the last one (as described here: http://foundation.zurb.com/sites/docs/responsive-navigation.html) was working fine for the mobile (small) view: <ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown" But this piece of code doesn't include the fromatting as it is given with the "Dropdown Menu" (as described here: http://foundation.zurb.com/sites/docs/dropdown-menu.html) for medium+ screens: the responsive navigation for it's own produces dropdown lists starting horizontal beneath the menu item and not below of it. My solution is to use nearly the same code twice, enclosed with the required list tags for small screens only and medium+ screens:

Edit: I changed the data-responsive-toggle breakpoint to "large" and the ul class to a data-drilldown menu because the previously used attribute data-responsive-menu="drilldown medium-dropdown"is obsolete for my solution as decribed above.

<div class="top-bar-right hide-for-large"> <ul class="vertical menu" data-drilldown> <li> (...) </li </ul> </div>

(...) AND

<div class="top-bar-right show-for-large"> <ul class="dropdown menu" data-dropdown-menu> <li> (...) </li </ul> </div>

This is working for me. You can show an example on http://frickeln.jensfreyer.de/blog. But it would be great to avoid this extra piece of code anyway. Hope this helps!