@Fabian_Colnaric - If you look at the page source you can see where it is loaded; right before the body close. So any JavaScript that loads jQuery needs to be in the 'before page body close" custom code area OR you could use the following anywhere with Webflow’s push function;
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// your code with JQuery
});
</script>
Okay,
but it’s not working without the jquery in my case. Should I place the code in the body or head?
Got it working!
Here is Fabians code wrapped in Jeff Selsers push function (without loading jquery twice):
Ive also added Esc on the keyboard as a way to close the menu.
Remember to replace the class .close-dropdown with your own
<script>
// Close dropdown
var Webflow = Webflow || [];
Webflow.push(function () {
$(document).ready(function() {
$('.close-dropdown').on('click', function () {
$(".w-dropdown").trigger("w-close");
});
$(document).on('keydown', function (e) {
if (e.key === 'Escape') {
$(".w-dropdown").trigger("w-close");
}
});
});
});
</script>
No way that this is the working code. I tried so many other (waaaaay more complex) suggestions :o !!!
Thank you so much!! This worked perfectly. For anyone who needs more context, replace .close-dropdown with any class on the links being clicked inside the dropdown
Thank you for adding clarity. That ended up working for me!!
This ended up working, thanks!!
How were you able to point to a specific selector? I have my drop-down nested and even if I call a specific ID or class to close they all close.
var Webflow = Webflow || [];
Webflow.push(function () {
$(document).ready(function() {
$('.closedd-papa').on('click', function() {
$('.papadd').trigger('w-close');
});
});
});
The code works great on the webflow staging .io page itself but once I publish it to a custom domain it stops working.
@adanmacreates Hi and then what’s next? I’m not a coder could you give me a step by step and tell me where to put the code exactly?
Hey everyone! I believe I’ve found a native solution to fix this issue.
If you’re using a dropdown, simply add a link within the dropdown by clicking the “Add Link” button. This works perfectly without the need for any additional interactions or custom code.
Hope this helps!
Hello all,
I have resolved this issue for my site and i though it was a good idea to share my solution with you, hopefully this can help anyone out there.
The solution is not the best but it works great and no code is needed.
Basically, if you need to navigate sections in the same page, you will have a navbar component clone using section type navigation
If you need to navigate sections to a different page, you will have a navbar component clone using link type navigation, for example to /#my-section-id if the section is in your home.
This way you will have full control of when is section and when is link and you will make your navigation work on all devices. The downside tough is if you need to do a change in the navbar you will have to make that change in all instances sadly.
Hope this help !
