Dropdown Toggle Bug

Hi guys,

I’ve found what I can only think is a bug and we’d like some help resolving it as soon as we can.

See our read-only link below first, where the ‘Other’ Dropdown Toggle works perfectly in Preview mode, as it has done since the start of the build.

Then take a look at the live site IronMarket.co.uk where you’ll find it’s just not working.

I’ve looked over the CSS and there’s nothing in the way stopping the hover interaction so I’m stumped what it could be. Any help would be massively appreciated.

Cheers!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I don’t see why it doewn’t work as expected. Could you delete this element and redo it from scratch with different classes? I’m pretty sure it will then work.

Thanks for your idea Vincent. However, I’ve just put a fresh unedited dropdown element into the nav bar and one in the hero, both are showing the same bug on publish. I’ve only changed the logo today so very confused as to when/how this has happened.

Do you think it could be a big in the designer?
I’ll have to continue to work on sorting it as it’s our live client facing site which is the problem, if you have any more ideas though, please do let me know pal.

Cheers

No, I’d consider that in last resort.

It is not at all the first time I see a Navbar behaving oddly. It usually happens after fiddling too much with it. For instance here I don’t understand why the navbar element has to be a flexbox.

So let’s use my advice again but on a broader scale: now that you know exactly how your navbar should look, redo it from scratch using different classes, and making sure it continues to work by checking after every few actions. It’s going to be quick to do, and I’m pretty sure it will work afterwards.

Why can it bug, then? Well the Navbar is one of the few “magic” element in Webflow, it comes with many preconfigured elements and can, if fiddle with too much, start to behave funny. Start by building it without styling it, check that it’s working, then style it, trying to do it in the most simplest way.

Let me know how it goes.

Aha, bingo. So I’ve just temporarily deleted all my custom code and republished and it’s back working so I’ll work though my custom code and see what’s the culprit.

Will update soon.

Ah! Well done Mike. Let me know the culprit, I wonder what it is. I couldn’t deduct the issue by inspecting the code.

Right, the problem is Vue.js but it hasn’t been an issue until now. there’s nothing Vue related being shown in the console or Vue dev tools to indicate why it doesn’t like it all of a sudden.

I’ll continue working on it and see what I find dude.

Hey btw, great design. Those giant rounded shapes play very nice on the page. The reading path is excellent, the storytelling is perfectly balanced, the pre-filling of checkboxes options on CTA click is perfect. Very well done.

Really appreciate that pal!

I’m not happy with it though, I’m designing a new one for us completely different now :joy::joy:

It was my first every project not using a template though so I’m happy with what I learnt along the journey, it was only supposed to be a landing page initially haha.

Well I can’t wait to see what’s next. I followed you on your Webflow profile so don’t hesitate to showcase and share things there.

1 Like

Cheers dude, I’ll be sure to share with you when I’m done, I’m just super busy with other projects but I’m confident it’s going to be tasty!

Solved!

Okay so get this, the problem was that I was calling my Vue.js instance when the Document was Ready like so:

$(document).ready( function() {
  var landingPage = new Vue ({
    el: '#id',
    data: {
      ...
    },
    mounted: function() {
      ...
    },
    methods: {
      ...
    },
    computed: {
      ...
    }
  })
});

I got advised this by a friend a couple of months back for a reason I can’t remember but I’ve just removed my Vue code from $(document).ready() given this drop-down problem and the site works fine now so all good, I’m gonna leave it before I break it again haha. :smiley:

Maybe some JS ninja out there can shed some light on why this would affect Webflow’s dropdown element but nothing else?

Cheers again V.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.