Menu icon Foundation
Responsive navigation problem

I need help with my navigation menu. It's an horizontal menu and few buttons have drop-down sub-menus. The code is attached.

The problem: the vertical sub menus are opening as horizontal sub-menus and not as vertical sub-menus. The arrows near the button links point to the right instead of down.

If after 'top-bar-left' I add the line '

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
</div>

<div class="top-bar" id="main-menu">
<div class="row">
<div class="top-bar-left">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">  
      <li><a href="#">Home</a></li>
      <li class="has-submenu"><a href="#">Item2</a>
         <ul class="submenu menu vertical" data-submenu>
                 <li><a href="#">Sub-item 2</a></li>
                 <li><a href="#">Sub-item 2</a></li>
        </ul>
      </li>
</ul>
  
</div>
</div>
</div>
            

         

navigationresponsive navigation

I need help with my navigation menu. It's an horizontal menu and few buttons have drop-down sub-menus. The code is attached.

The problem: the vertical sub menus are opening as horizontal sub-menus and not as vertical sub-menus. The arrows near the button links point to the right instead of down.

If after 'top-bar-left' I add the line '

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
</div>

<div class="top-bar" id="main-menu">
<div class="row">
<div class="top-bar-left">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">  
      <li><a href="#">Home</a></li>
      <li class="has-submenu"><a href="#">Item2</a>
         <ul class="submenu menu vertical" data-submenu>
                 <li><a href="#">Sub-item 2</a></li>
                 <li><a href="#">Sub-item 2</a></li>
        </ul>
      </li>
</ul>
  
</div>
</div>
</div>
            

         
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>

.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; }

Eddie Solomon almost 4 years ago

Thank you Hannes,

Yes, that's the structure I'm using. The problem is that on medium/large pages, when I hover over a link with a sub menu, the sub menu is displayed horizontally and not vertically. Also, the link's arrow points to top-right and not down.

Any idea how to fix that?

Thanks

Rafi Benkual almost 4 years ago

Hi Eddie,
What type of menu will you be using on a small screen? You can remove the .vertical .medium-horizontal classes on the dropdown <ul>.

Eddie Solomon almost 4 years ago

Hi Rafi,

Thank you for your reply.

On a small screen I want to use a vertical menu. When I click the hamburger I want the horizontal menu I have on medium/large screens to become a vertical screen.
What happens is that when I click the hamburger on a small screen, I get a horizontal menu.

The thing is that even on your own 'responsive navigation' doc example, as well as on the university lesson about foundation 6 navigation, if I resize the browser to a small screen, the same thing happens: the navigation menu is horizontal and not vertical, which obviously doesn't make sense on mobiles.

I did what you said (please see attached code line) but it doesn't help.

I'd be grateful to get some help on this topic.

Thanks

<ul class="menu" data-responsive-menu="drilldown medium-dropdown">  

Hannes Lehner almost 4 years ago

Look at my side. I use 6.1.2
http://www.ringelrose.de/anni/kromis.html

Eddie Solomon almost 4 years ago

Thank you Hannes,

That's exactly what I'm trying to achieve.
I'll have a look at your code now and see what I did wrong.

Thanks a lot
Eddie

James Cocker almost 4 years ago

I've run into this issue too and am pretty sure it's a bug in Foundation.

Hannes seems to get around it by applying some extra CSS to force the arrows to point down, but this isn't the best solution and it really needs to be fixed in the Foundation core.

Here is an example that reproduces the issue: http://codepen.io/purplespider/pen/pgqOdZ

It's also come up on Github: https://github.com/zurb/foundation-sites/issues/7095