Menu icon Foundation
Top bar in Foundation 6

Hello,

I'm moving from foundation 5 to foundation 6. I tried to convert the topbar to foundation 6. At first with the "responsive toggle" but this gives you a horizontal menu on small screens, instead of the vertical in foundation5. .

So i tried the method as written in:
https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6.
This should be the solution , However the horizontal menu on the large screen works on a special way, the dropdowns are on the right side of the links with arrows to the right instead of down as you would aspect in a normal horizontal menu. In fact its a horizontal menu wich behaves like a vertical one.
Please help.

menu foundation6 top-bar

Hello,

I'm moving from foundation 5 to foundation 6. I tried to convert the topbar to foundation 6. At first with the "responsive toggle" but this gives you a horizontal menu on small screens, instead of the vertical in foundation5. .

So i tried the method as written in:
https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6.
This should be the solution , However the horizontal menu on the large screen works on a special way, the dropdowns are on the right side of the links with arrows to the right instead of down as you would aspect in a normal horizontal menu. In fact its a horizontal menu wich behaves like a vertical one.
Please help.

Julien Studer almost 4 years ago

Exacty the same problem !
i have tried different classes (horizontal, vertical) and data attributes, but impossible to get it working...

Carol almost 4 years ago

Top Bar not working for me in Foundation 6 either. Vertical Navigation is open on small screen and can not be closed by clicking on menu icon.

Navigation worked fine on another site but it was not in the top-bar

Vladimir almost 4 years ago

Same problem here and I thought it was my mistake :(
When I somehow manage to get the arrow down and menu "jumps" as it suppose to the mobile navigation is distorted in terrible way. Here is the example
http://zlajo.webfactional.com/

Carol almost 4 years ago

https://foe2120.com/ if the menu is in mid page it works much better. The line needs to be expanded a bit but it is not a mess like yours.

It has to be a problem with the topbar code cause the menu works in other places on the page.

Hannes Lehner almost 4 years ago

I use this in (F6.1.2 important!):

<div  class="title-bar"  data-responsive-toggle="main-menu"  data-hide-for="medium">
<button  class="menu-icon"  type="button"  data-toggle=""></button>
<div  class="title-bar-title">Menu</div>
</div>
<div  class="top-bar"  id="main-menu">
<div  class="top-bar-left">
<ul  class="dropdown menu"  data-dropdown-menu="">
<li  class="menu-text">Site Title</li>
</ul>
</div>
<div  class="top-bar-right">
<ul  class="menu vertical medium-horizontal"  data-responsive-menu="drilldown medium-dropdown">
<li  class="has-submenu"> <a  href="#">One</a>
<ul  class="submenu menu vertical"  data-submenu="">
<li><a  href="#">One</a></li>
<li><a  href="#">Two</a></li>
<li><a  href="#">Three</a></li>
</ul>
</li>
<li><a  href="#">Two</a></li>
<li><a  href="#">Three</a></li>
</ul>
</div>
</div>

.title-bar {
  background: #7798a1; }

.top-bar {
  background: #7798a1; }
  .top-bar ul {
    background: #7798a1; }

    .top-bar ul li {
      background: #7798a1; }       
      .top-bar ul li a {
        color: #ffffff; }
.top-bar ul li a:hover {  
  text-decoration: none;  
  color: #ea421e; }
.title-bar-title {
  color: #ffffff; }
.menu-text {
  color: #ffffff; }
.dropdown.menu .submenu {
  border: none; }
.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
  border-color: #ffffff transparent transparent; }
.is-drilldown-submenu-parent > a::after {
    border-color: transparent transparent transparent #ffffff; }
.js-drilldown-back::before {
  border-color: transparent #ffffff transparent transparent; }

Julien Studer almost 4 years ago

hi tried your html code, did not check if css was the same (but i also use 6.1.2), and it does not resolve the "bug"...

did you modify the css ?

Hannes Lehner almost 4 years ago

You have to create your own css and it should be the last css in your code.
This one is important:

.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
  border-color: #ffffff transparent transparent; }
.is-drilldown-submenu-parent > a::after {
    border-color: transparent transparent transparent #ffffff; }
.js-drilldown-back::before {
  border-color: transparent #ffffff transparent transparent; }

Julien Studer almost 4 years ago

ok i see.
but the problem is that the sub-menu, on desktop, doesn't open under its parent, it opens on the right...

Hannes Lehner almost 4 years ago

In my side, its open under its parent
look:
http://www.ringelrose.de/anni/kromis.html

Sam Carter almost 4 years ago

I am having a similar problem with drop downs in the top bar appearing in the wrong position when used with responsive classes.

I've tested this out in a fresh project install from the CLI, using the Zurb Template. I've used code from the Zurb documentation page http://foundation.zurb.com/sites/docs/responsive-navigation.html for my test so that it is easy to reproduce.

I have placed a demo of this code on-line so you can see the problem using code altered as little as possible from the default install (no changes to SCSS, CSS or JS).

http://www.superframevfx.com/foundation/topbarbug/index.html
Note: this went on-line 04/02/2016 but I may not be able to host it permanently as we are updating our web server shortly- apologies to future viewers. Please refer to the foundation documentation page above for examples.

As you can see, in the zurb example, you get a horizontal bar on small screens, as it should do because it lacks the responsive classes to change menu type, but when you add those classes (as seen in the second modified example), the menu drop down un-ordered list elements appear in the wrong positions, covering neighbouring menu list items.

Zurb example:
HTML
<ul class="dropdown menu" data-dropdown-menu>

Modified Example:
HTML
<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">

I found also, additional problems when trying to integrate sticky or megellan plugins onto these menu elements, which was possible out of the box without issue in Foundation 5.x if memory serves.

It looks like something that could be fixed in css with some classes of your own, as Hannes shows. I expect those classes will cause a break in future if this issue is fixed though. Hopefully Zurb will be able to release a robust fix for this issue.

It should be noted, this code was copied from the 'dist' folder, after running the 'foundation watch' command, not the 'build' command. The 'build command gives errors when compiling the menu, resulting in an always visible title-bar, rather than the top-bar being visible on medium screens or above. Users have found commented out .pipe(uncss) from their gulpfile.js resolved this issue. See http://foundation.zurb.com/forum/posts/36402-f6-scss-not-compiling-correctly for more information.

Full modified html code example:
Note: I've used accordion here, but drilldown gives similar results.
Modified Example:
```HTML


Menu

  <div class="top-bar" id="example-menu">
    <div class="top-bar-left">
      <ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
        <li class="menu-text"><a href="index.html" style="color:black;">Back</a></li>
        <li>
          <a href="#">One</a>
          <ul class="menu vertical nested">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><input type="search" placeholder="Search"></li>
        <li><button type="button" class="button">Search</button></li>
      </ul>
    </div>
  </div>

Eddie Solomon almost 4 years ago

I had the same problem.

After Hannes showed me his css code, I noticed the problem is with the sass version of Foundation. On the css version it works fine.

Any solution Foundation people to solve the problem on Sass?

Jos Kelleners almost 4 years ago

Hello,

I found a solution, maybe it is not the most elegant one but I can live with it and continue the project until ZURB corrects the code.
I folloed the solution as described in:
https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6.
Then corrected the position from the dropdown and changed the arrow class.

.is-dropdown-submenu.first-sub {
top: 30px;  
left: 0%;  
}
   <script>
  $(function(){
    $(".medium-horizontal>.is-dropdown-submenu-parent.is-right-arrow").removeClass("is-right-arrow").addClass('is-down-arrow'); 
  });
  $( window ).resize(function() {
   $(".medium-horizontal>.is-dropdown-submenu-parent.is-right-arrow").removeClass("is-right-arrow").addClass('is-down-arrow'); 
});
   </script>

Eddie Solomon almost 4 years ago

Hello,

First I gave up on the sass and returned to the css option. I downloaded a few customized versions and suddenly I noticed the same problem on only one css download. After a few tests I discovered that the problem is with the downloaded foundation.css file. I copied the 'good' foundation.css to the sass directory and the problem was solved.

I didn't have time yet to check what version of foundation.css works or what causes the problem, but it fixed the bug.

Rafi Benkual over 3 years ago

Hey everyone! I opened a discussion on this topic here: http://foundation.zurb.com/forum/posts/38403- With some details on what's happening with it. We'd love to hear more about how you're using the new menu in F6 and any suggestions/work arounds you've tried.

Stevie-Ray Hartog over 3 years ago

I've build a complete responsive version of the Foundation 5 Top Bar in Foundation 6.

Check it out on CodePen.io!