Menu icon Foundation
5.0.3 problem on clicking top-bar item

Hello,

since upgrading to 5.0.3 menu items with dropdown are not going to linked page and also are pushing the content down by the size of the dropdown. The actual dropdown works fine on hover and I can select and go to links from them. It is just the main item link.

Have a look here www.francescarosejohnston.co.uk and try to click on portfolio.

This happening in both chrome and firefox on linux.

top-bar topbar

Hello,

since upgrading to 5.0.3 menu items with dropdown are not going to linked page and also are pushing the content down by the size of the dropdown. The actual dropdown works fine on hover and I can select and go to links from them. It is just the main item link.

Have a look here www.francescarosejohnston.co.uk and try to click on portfolio.

This happening in both chrome and firefox on linux.

This post has been closed. No new replies can be added.

Rafi Benkual over 5 years ago

Your JS seems to be adding a fixed height to the topbar. Not sure why but we'll keep looking. Anyone seen this before?

Created a codepen to eliminate some possible issues. http://cdpn.io/EctuG. It's not happening here.

Rafi Benkual over 5 years ago

@slowestbro on Twitter submitted: a style of "height: 394px" is being added on click which is causing the gap to appear

Shawn Hansen over 5 years ago

It seems as if the following section of code in foundation.topbar.js has something to do with it. I would try commenting out foundation.topbar.js and see if you get expected behavior. You are already calling foundation.min.js which includes all the necessary javascript.

 .on('click.fndtn.topbar', '[data-topbar] .has-dropdown>a', function (e) {
          if (self.breakpoint()) {

            e.preventDefault();

            var $this = $(this),
                topbar = $this.closest('[data-topbar]'),
                section = topbar.find('section, .section'),
                dropdownHeight = $this.next('.dropdown').outerHeight(),
                $selectedLi = $this.closest('li');

            topbar.data('index', topbar.data('index') + 1);
            $selectedLi.addClass('moved');

            if (!self.rtl) {
              section.css({left: -(100 * topbar.data('index')) + '%'});
              section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
            } else {
              section.css({right: -(100 * topbar.data('index')) + '%'});
              section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
            }

            topbar.css('height', $this.siblings('ul').outerHeight(true) + topbar.data('height'));
          }

Rafi Benkual over 5 years ago

Thanks Sean for jumping in! Paddy does this help?

Magd Kudama over 5 years ago

If the resultant HTML is:

<div class="row mainrow">
  <div class="large-12 columns">
    (SAME CONTENT)
  </div>
</div>

Works for me.

Cheers!

Paddy Ogee over 5 years ago

Thanks everyone for replying. This really helped. I did try the above and nothing happened. However, it then forced me to go back to basics, so I reloaded 'everything' required from the 5.0.3 download and all worked. I can't tell you specifically what caused it but suspect that I may have inadvertently left the 5.0.2 foundation folder up with 5.0.3 foundation.min.js

Anyway it is now resolved, so thanks to you all!