A little help with Hoverable Dropdown...

User 283347 Photo


Registered User
388 posts

I'm messing with FF and am using the hover dropdown component ....seems to work ok, but if you click it, it goes to the top...when on mobile it goes to the top and closes itself.

I removed the "#" in the href box and it still does this.

I'm hoping it is an easy fix that I am overlooking. Can anyone point me to a fix so when clicked it goes nowhere when on computer...and on mobile will only open the dropdown and stay put? I hope I'm making sense. :)

go to 5pointsswing.coffeecup.com to see it...scroll down to the blue "test123" button under the Design icon...

Thanks,
Mark
User 232214 Photo


COO
827 posts

I think this post about link scrolling will explain you what to do.

(We need to look at that component to see if it needs updating in line with the post)
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2147646 Photo


Registered User
233 posts

Go to Settings >> Footer and add

<script>
document.querySelector(".dropdown-btn").addEventListener("click", function(e){
e.preventDefault()
});
</script>

Or if you have already added jQuery you can use

<script>
$(".dropdown-btn").click(function(e){
e.preventDefault();
});
</script>

User 2147646 Photo


Registered User
233 posts

If you have more than one dropdown you will need to use document.querySelectorAll

User 283347 Photo


Registered User
388 posts

Thanks, Bob and James D, for the responses. Both options work well. I used the first code snippet for the footer and it seems to work great.



MJ
User 283347 Photo


Registered User
388 posts

Hey James,

Thanks for this update!

James D wrote:
If you have more than one dropdown you will need to use document.querySelectorAll
User 283347 Photo


Registered User
388 posts

Hey James...seems the "All" did not work...I added another and it stopped behaving. Any ideas??

Thanks
User 283347 Photo


Registered User
388 posts

Please do. As well, can you look into the multiple drop-downs thing, too?
Thanks!
MJ

Bob Visser wrote:

(We need to look at that component to see if it needs updating in line with the post)
User 2147646 Photo


Registered User
233 posts

Hi Mark, you have jQuery linked so try

<script>
$(".dropdown-btn").click(function(e){
e.preventDefault();
});
</script>

User 283347 Photo


Registered User
388 posts

Hey James,
Thanks for your help. Very kind of you.

Well...I am at a loss...I added a 2nd hover with your last bit of code added to the project, but it doesnt seem to work?

most recent upload is at the fivepointsswing.coffeecup.com Note the behavior...hovering over the second one (the right one) drops down the first ones box??? I messed with classes and id's to see if that made a difference but it did not.
Any ideas?
Thanks,
Mark

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.