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
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
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)
(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.
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>
<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>
If you have more than one dropdown you will need to use document.querySelectorAll
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
MJ
Hey James,
Thanks for this update!
Thanks for this update!
James D wrote:
If you have more than one dropdown you will need to use document.querySelectorAll
If you have more than one dropdown you will need to use document.querySelectorAll
Hey James...seems the "All" did not work...I added another and it stopped behaving. Any ideas??
Thanks
Thanks
Please do. As well, can you look into the multiple drop-downs thing, too?
Thanks!
MJ
Thanks!
MJ
Bob Visser wrote:
(We need to look at that component to see if it needs updating in line with the post)
(We need to look at that component to see if it needs updating in line with the post)
Hi Mark, you have jQuery linked so try
<script>
$(".dropdown-btn").click(function(e){
e.preventDefault();
});
</script>
<script>
$(".dropdown-btn").click(function(e){
e.preventDefault();
});
</script>
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
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.