Menu icon Foundation
Enable JS generated Menu for higher breakpoints

I want the JS generated menu also when the top-bar breakpoint is around 64em. By default it is generated only on foundations default breakpoint of about 40em.

Can someone please suggest an easy way to do this.

Thank you.

Bit

top-bar JS menuTop-bar JS

I want the JS generated menu also when the top-bar breakpoint is around 64em. By default it is generated only on foundations default breakpoint of about 40em.

Can someone please suggest an easy way to do this.

Thank you.

Bit

Rafi Benkual over 4 years ago
Bit Byte over 4 years ago

Hello Rafi,

Thank you for the input, but I wasn't asking about the top-bar breakpoint. When the view-port is foundations default 40em and then you open the collapsed top-bar. Now, when any of menu items have sub-menus and you click it open, it shows the menu and it's sub-menus. But when the breakpoint has been increased and is more than 40em, it does not show the menu; it shows only the sub-menus without showing the menu they belong to. I would like to change it so it shows the menu as well as the sub-menus even when the toggle width has been increased.

[I wish there was someway to show image/s in a reply post as there are no options to do that when making a reply. One can do it when creating a post, but that option is no longer accessible.]

The link you posted refers to more than one year old solutions, but as you know a lot of water has flowed down the bridge since.

// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: 64rem !default; //#{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
//$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";

I had to do it this way. And this is because the media query maps have changed since and need to be tampered with if we want Grunt to accept any changes using the previous solutions. At least for me it worked that way without having the "swine grunting all the time".

Regards,

Bit

Rafi Benkual over 4 years ago

Hi Bit - For now you can hit "edit post" to add images or link an image from a service like awesomescreenshot

More explanation will help get you an answer.

Rafi Benkual over 4 years ago
Bit Byte over 4 years ago

That is exactly what I mean.

In the meanwhile I checked the foundation.topbar.js and that is where it has been specified:

  // Pull element out of the DOM for manipulation
      section.detach();

      self.S('.has-dropdown>a', section).each(function () {
        var $link = self.S(this),
            $dropdown = $link.siblings('.dropdown'),
            url = $link.attr('href'),
            $titleLi;

        if (!$dropdown.find('.title.back').length) {

          if (settings.mobile_show_parent_link == true && url) {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="' + url + '">' + $link.html() +'</a></li>');
          } else {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5>');
          }

          // Copy link to subnav
          if (settings.custom_back_text == true) {
            $('h5>a', $titleLi).html(settings.back_text);
          } else {
            $('h5>a', $titleLi).html('&laquo; ' + $link.html());
          }
          $dropdown.prepend($titleLi);
        }
      });

settings.mobile_show_parent_link == true && url

I suppose this needs to be changed.

Thank You,

Bit

Rafi Benkual over 4 years ago

Yes, for now you can add a class like suggested on github https://github.com/zurb/foundation/pull/6538/files

But before we merge this in, we'll have to suggest better naming for the class ;)

Bit Byte over 4 years ago

I simply changed "medium" to "top-bar-desktop" in the foundation.topbar.js and that is working quite efficiently!

Best regards,

Bit