Streaming live at 10am (PST)

Drop-down Menu works on Webflow, but using exported code

I’ve got a dropdown menu that works fine in the Designer, and in the Preview, but when I export the code and load it on my dev server, the dropdown doesn’t work. I examined the code and it appears to be there, but I’m not an expert on dropdown code.

Below is what Webflow exported. It looks okay to me (but clearly I’m missing something). Does anyone see any issues, or know of issues already with Dropdowns and exported code?

Many thanks.

<body class="body">
  <div data-collapse="medium" data-animation="default" data-duration="400" class="navbar-2 w-nav">
    <div class="nav-container w-container"><a href="#" class="w-nav-brand"><img src="images/MeSticksLogoSm.png" alt="AW Logo Stick Figure" width="156" class="image-14"></a>
      <nav role="navigation" class="nav-menu-2 w-nav-menu"><a href="index.html" class="button navbar home w-nav-link w--current">Home</a>
        <div data-delay="0" data-hover="1" class="dropdown-2 w-dropdown">
          <div class="dropdown-toggle w-dropdown-toggle">
            <div class="button navbar dropdown">Case Studies</div>
          </div>
          <nav class="dropdown-list w-dropdown-list"><a href="case-studies/motorola.html" class="dropdown-mot w-dropdown-link">Motorola</a><a href="case-studies/barren-ridge-vineyards-website.html" class="dropdown-brv w-dropdown-link">Barren Ridge Vineyards</a><a href="case-studies/woolsey-workshop-website.html" class="dropdown-wws w-dropdown-link">Woolsey Workshop</a><a href="case-studies/ui-ux-highlights-for-other-projects.html" class="dropdownhighlights w-dropdown-link">Other Project Highlights</a></nav>
        </div><a href="about.html" class="button navbar about w-nav-link">About</a></nav>
      <div class="w-nav-button">
        <div class="w-icon-nav-menu"></div>
      </div>
    </div>
  </div>

Dropdown elements exported from Webflow are dependent upon Webflow’s JavaScript. Make sure that you are loading all the correct assets. Sharing a link to your exported site would be beneficial here.

I exported all the elements (HTML, CSS, JS, Assets) (following is a pic of the unzipped directories).

I would share the link, but it’s on my localhost.

Here’s a portion of the js it exported. This is the portion that referenced dropdowns.

i.define(“dropdown”,t.exports=function(t,e){var n,s,u={},c=t(document),l=i.env(),f=i.env.touch,d=".w-dropdown",h=“w–open”,p=“w-close”+d,v=r.triggers,g=900,m=!1;function w(){s=l&&i.env(“design”),(n=c.find(d)).each(b)}function b(n,r){var u=t®,f=t.data(r,d);f||(f=t.data(r,d,{open:!1,el:u,config:{},selectedIdx:-1})),f.list=u.children(".w-dropdown-list"),f.toggle=u.children(".w-dropdown-toggle"),f.links=f.list.children(".w-dropdown-link"),f.outside=function(n){n.outside&&c.off(z()+d,n.outside);return e.debounce(function(e){if(n.open){var r=t(e.target);if(!r.closest(".w-dropdown-toggle").length){var o=-1===t.inArray(n.el[0],r.parents(d)),a=i.env(“editor”);if(o){if(a){var s=1===r.parents().length&&1===r.parents(“svg”).length,u=r.parents(".w-editor-bem-EditorHoverControls").length;if(s||u)return}E(n)}}}})}(f),f.complete=function(t){return function(){t.list.removeClass(h),t.toggle.removeClass(h),t.manageZ&&t.el.css(“z-index”,"")}}(f),f.leave=function(t){return function(){t.hovering=!1,t.links.is(":focus")||E(t)}}(f),f.moveOutside=function(n){return e.debounce(function(e){if(n.open){var i=t(e.target),r=-1===t.inArray(n.el[0],i.parents(d));if®{var o=i.parents(".w-editor-bem-EditorHoverControls").length,a=i.parents(".w-editor-bem-RTToolbar").length,s=t(".w-editor-bem-EditorOverlay"),u=s.find(".w-editor-edit-outline").length||s.find(".w-editor-bem-RTToolbar").length;if(o||a||u)return;n.hovering=!1,E(n)}}})}(f),u.off(d),f.toggle.off(d),y(f),f.nav&&f.nav.off(d),f.nav=u.closest(".w-nav"),f.nav.on(p,x(f)),s?u.on(“setting”+d,x(f)):(f.toggle.on(z()+d,k(f,a)),f.config.hover&&f.toggle.on(“mouseenter”+d,function(t){return function(){t.hovering=!0,(t),t.links.is(":focus")||t.toggle.focus()}}(f)),u.on(p,x(f)),l&&(f.hovering=!1,E(f)));var v=f.list.attr(“id”),g=f.toggle.attr(“id”);u.attr(“role”,“menu”),u.on(“keydown”,T),v||(v=“w-dropdown-list-”+n,f.list.attr(“id”,v)),u.on(“keyup”,function(t){return function(e){if(!s&&!m&&(t.open||t.toggle.is(":focus")))switch(e.keyCode){case o.HOME:if(!t.open)return;return t.selectedIdx=0,void O(t);case o.END:if(!t.open)return;return t.selectedIdx=t.links.length-1,void O(t);case o.ESCAPE:return void E(t,{forceClose:!0});case o.ARROW_DOWN:return t.selectedIdx=Math.min(t.links.length-1,t.selectedIdx+1),void(t.selectedIdx>=0&&(t.open||(t.selectedIdx=0),(t),O(t)));case o.ARROW_UP:return t.selectedIdx=Math.max(-1,t.selectedIdx-1),void(t.selectedIdx<0?(E(t,{immediate:!0,forceClose:!0}),t.toggle.focus()):frowning:(t),O(t)));default:return}}}(f)),f.links.attr(“tabindex”,"-1"),f.links.attr(“role”,“menuitem”),f.toggle.attr(“tabindex”)||f.toggle.attr(“tabindex”,“0”),g||(g=“w-dropdown-toggle-”+n,f.toggle.attr(“id”,g)),f.toggle.attr(“aria-controls”,v),f.toggle.attr(“aria-haspopup”,“menu”),f.toggle.on(“keyup”,function(t){var e=k(t,a);return function(t){s||m||t.keyCode!==o.SPACE&&t.keyCode!==o.ENTER||(t.stopPropagation(),e())}}(f)),u.attr(“aria-labelledby”,g),f.toggle.css(“outline”,“none”),f.links.css(“outline”,“none”)}function y(t){var e=Number(t.el.css(“z-index”));t.manageZ=e===g||e===g+1,t.config={hover:(!0===t.el.attr(“data-hover”)||“1”===t.el.attr(“data-hover”))&&!f,delay:Number(t.el.attr(“data-delay”))||0}}function x(t){return function(e,n){return n=n||{},“w-close”===e.type?E(t,{focusToggle:!1}):“setting”===e.type?(y(t),!0===n.open&&(t),void(!1===n.open&&E(t,{immediate:!0}))):void 0}}function k(t,n){return e.debounce(function(){if(t.open)return E(t,{forceClose:n});_(t),O(t)})}function (e){if(!e.open){!function(e){var i=e.el[0];n.each(function(e,n){var r=t(n);r.is(i)||r.has(i).length||r.triggerHandler§})}(e),e.open=!0,e.list.addClass(h),e.toggle.addClass(h),e.toggle.attr(“aria-expanded”,“true”),v.intro(0,e.el[0]),i.redraw.up(),e.manageZ&&e.el.css(“z-index”,g+1);var r=i.env(“editor”);s||c.on(z()+d,e.outside),e.hovering&&!r&&e.el.on(“mouseleave”+d,e.leave),e.hovering&&r&&c.on(“mousemove”+d,e.moveOutside),window.clearTimeout(e.delayId)}}function E(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.immediate,i=e.forceClose,r=e.focusToggle,o=void 0===r||r;if(t.open&&(!t.config.hover||!t.hovering||i)){t.toggle.removeAttr(“aria-expanded”),o&&t.toggle.focus(),t.open=!1;var a=t.config;if(v.outro(0,t.el[0]),c.off(z()+d,t.outside),t.el.off(“mouseleave”+d,t.leave),c.off(“mousemove”+d,t.moveOutside),window.clearTimeout(t.delayId),!a.delay||n)return t.complete();t.delayId=window.setTimeout(t.complete,a.delay)}}function O(t){t.links[t.selectedIdx]&&t.links[t.selectedIdx].focus()}function T(t){if(!s)switch(t.keyCode){case o.HOME:case o.END:case o.ARROW_DOWN:case o.ARROW_UP:return t.preventDefault();default:return}}function z(){return f?“tap”:“mouseup”}return u.ready=w,u.design=function(){m&&c.find(d).each(function(e,n){t(n).triggerHandler§}),m=!1,w()},u.preview=function(){m=!0,w()},u})},function(t,e,n){“use strict”;var i=window.jQuery,r={},o=[],a={reset:function(t,e){e.__wf_intro=null},intro:function(t,e){e.__wf_intro||(e.__wf_intro=!0,i(e).triggerHandler(r.types.INTRO))},outro:function(t,e){e.__wf_intro&&(e.__wf_intro=null,i(e).triggerHandler(r.types.OUTRO))}};r.triggers={},r.types={INTRO:“w-ix-intro.w-ix”,OUTRO:“w-ix-outro.w-ix”},r.init=function(){for(var t=o.length,e=0;e<t;e++){var n=o[e];n0}o=[],i.extend(r.triggers,a)},r.async=function(){for(var t in a){var e=a[t];a.hasOwnProperty(t)&&(r.triggers[t]=function(t,n){o.push([e,n])})}},r.async(),t.exports=r},function(t,e,n){“use strict”;var i=n(0),r=n(2);i.define(“navbar”,t.exports=function(t,e){var n,o,a,s,u={},c=t.tram,l=t(window),f=t(document),d=i.env(),h=’

’,p=".w-nav",v=“w–open”,g=“w–nav-menu-open”,m=“w–nav-dropdown-open”,w=“w–nav-dropdown-toggle-open”,b=“w–nav-dropdown-list-open”,y=“w–nav-link-open”,x=r.triggers,k=t();function (){i.resize.off(E)}function E(){o.each®}function O(n,r){var o=t®,u=t.data(r,p);u||(u=t.data(r,p,{open:!1,el:o,config:{}})),u.menu=o.find(".w-nav-menu"),u.links=u.menu.find(".w-nav-link"),u.dropdowns=u.menu.find(".w-dropdown"),u.dropdownToggle=u.menu.find(".w-dropdown-toggle"),u.dropdownList=u.menu.find(".w-dropdown-list"),u.button=o.find(".w-nav-button"),u.container=o.find(".w-container"),u.outside=function(e){e.outside&&f.off(“tap”+p,e.outside);return function(n){var i=t(n.target);s&&i.closest(".w-editor-bem-EditorOverlay").length||S(e,i)}}(u),u.el.off§,u.button.off§,u.menu.off§,C(u),a?(z(u),u.el.on(“setting”+p,function(t){return function(n,i){i=i||{};var r=l.width();C(t),!0===i.open&&j(t,!0),!1===i.open&&q(t,!0),t.open&&e.defer(function(){r!==l.width()&&A(t)})}}(u))):(!function(e){if(e.overlay)return;e.overlay=t(h).appendTo(e.el),e.parent=e.menu.parent(),q(e,!0)}(u),u.button.on(“tap”+p,function(t){return e.debounce(function(){t.open?q(t):j(t)})}(u)),u.menu.on(“click”+p,“a”,function(e){return function(n){var r=t(this),o=r.attr(“href”);i.validClick(n.currentTarget)?o&&0===o.indexOf("#")&&e.open&&q(e):n.preventDefault()}}(u))),R(n,r)}function T(e,n){var i=t.data(n,p);i&&(z(i),t.removeData(n,p))}function z(t){t.overlay&&(q(t,!0),t.overlay.remove(),t.overlay=null)}function C(t){var n={},i=t.config||{},r=n.animation=t.el.attr(“data-animation”)||“default”;n.animOver=/^over/.test®,n.animDirect=/left$/.test®?-1:1,i.animation!==r&&t.open&&e.defer(A,t),n.easing=t.el.attr(“data-easing”)||“ease”,n.easing2=t.el.attr(“data-easing2”)||“ease”;var o=t.el.attr(“data-duration”);n.duration=null!=o?Number(o):400,n.docHeight=t.el.attr(“data-doc-height”),t.config=n}function A(t){t.open&&(q(t,!0),j(t,!0))}u.ready=u.design=u.preview=function(){if(a=d&&i.env(“design”),s=i.env(“editor”),n=t(document.body),!(o=f.find§).length)return;o.each(O),(),i.resize.on(E)},u.destroy=function(){k=t(),(),o&&o.length&&o.each(T)};var S=e.debounce(function(t,e){if(t.open){var n=e.closest(".w-nav-menu");t.menu.is(n)||q(t)}});function R(e,n){var i=t.data(n,p),r=i.collapsed=“none”!==i.button.css(“display”);if(!i.open||r||a||q(i,!0),i.container.length){var o=function(e){var n=e.container.css(M);“none”===n&&(n="");return function(e,i){(i=t(i)).css(M,""),“none”===i.css(M)&&i.css(M,n)}}(i);i.links.each(o),i.dropdowns.each(o)}i.open&&I(i)}var M=“max-width”;function j(t,e){if(!t.open){t.open=!0,t.menu.addClass(g),t.links.addClass(y),t.dropdowns.addClass(m),t.dropdownToggle.addClass(w),t.dropdownList.addClass(b),t.button.addClass(v);var n=t.config;“none”!==n.animation&&c.support.transform||(e=!0);var r=I(t),o=t.menu.outerHeight(!0),s=t.menu.outerWidth(!0),u=t.el.height(),l=t.el[0];if(R(0,l),x.intro(0,l),i.redraw.up(),a||f.on(“tap”+p,t.outside),!e){var d=“transform “+n.duration+“ms “+n.easing;if(t.overlay&&(k=t.menu.prev(),t.overlay.show().append(t.menu)),n.animOver)return c(t.menu).add(d).set({x:n.animDirects,height:r}).start({x:0}),void(t.overlay&&t.overlay.width(s));var h=u+o;c(t.menu).add(d).set({y:-h}).start({y:0})}}}function I(t){var e=t.config,i=e.docHeight?f.height():n.height();return e.animOver?t.menu.height(i):“fixed”!==t.el.css(“position”)&&(i-=t.el.height()),t.overlay&&t.overlay.height(i),i}function q(t,e){if(t.open){t.open=!1,t.button.removeClass(v);var n=t.config;if((“none”===n.animation||!c.support.transform||n.duration<=0)&&(e=!0),x.outro(0,t.el[0]),f.off(“tap”+p,t.outside),e)return c(t.menu).stop(),void u();var i="transform "+n.duration+"ms "+n.easing2,r=t.menu.outerHeight(!0),o=t.menu.outerWidth(!0),a=t.el.height();if(n.animOver)c(t.menu).add(i).start({x:on.animDirect}).then(u);else{var s=a+r;c(t.menu).add(i).start({y:-s}).then(u)}}function u(){t.menu.height(””),c(t.menu).set({x:0,y:0}),t.menu.removeClass(g),t.links.removeClass(y),t.dropdowns.removeClass(m),t.dropdownToggle.removeClass(w),t.dropdownList.removeClass(b),t.overlay&&t.overlay.children().length&&(k.length?t.menu.insertAfter(k):t.menu.prependTo(t.parent),t.overlay.attr(“style”,””).hide()),t.el.triggerHandler(“w-close”)}}return u})}]);

Seeing a portion of code won’t help us resolve your issue, since we can’t replicate your exported site. I suggest you open developer tools in your browser and check for errors in the console. Errors would indicate a broken link (404 error) that you could potentially resolve. It is almost always a hosting issue when things are not working on a Webflow export.

That makes perfect sense, Jeff. I’ll give it a shot. Thanks a lot.

Just to clean this up… …I never did get to try Jeff’s suggestion. I continued work on my site design and created another export about a week later. The new export had no issues with the drop down menu. It worked fine.

Cheers.
-a

Amy and Jeff, I am having this same exact issue.

Originally I assumed it was a design flaw with my configuration, but even the out-of-the-box standard nav bar isn’t opening as it should when I export. All of my other javascript is working as it should (hover modules, etc.), but when it comes to opening a dropdown menu using the nav menu button, it fails every time.

I tried Jeff’s suggestion, but couldn’t locate any errors upon inspection.

Here is my live page for reference: https://go.infiniaml.com/test-wwad

Not sure where to turn with this, so any advice you two can lend me would be greatly appreciated.