Hi,
I've been working with the Tech Talk template for a bit and I really like it. I'm not a coder, however, and I came across the following problem. The Site I designed uses anchor links with the top menu. Everything is fine and working well in desktop mode. However, in mobile mode, the mobile navigation menu doesn't close when an anchor link is clicked. The Site scrolls to the correct anchor, but the menu stays open. How do I close it?
I assume that the following portion of the code is responsible for the mobile menu (but I might be wrong):
<script>
document.addEventListener("DOMContentLoaded", function(event) {
$('.mobile-nav-button.neutral-right-button').click(function(e){
$('.navigation-links.neutral-right-menu').toggleClass('show-menu');
$('body').css('overflow', $('.navigation-links.neutral-right-menu').hasClass('show-menu') ? 'hidden' : 'auto');
});
});
</script>
If this is the correct bit of code... what can I add to it in order to close the menu on a click?
Thank you very much!
I've been working with the Tech Talk template for a bit and I really like it. I'm not a coder, however, and I came across the following problem. The Site I designed uses anchor links with the top menu. Everything is fine and working well in desktop mode. However, in mobile mode, the mobile navigation menu doesn't close when an anchor link is clicked. The Site scrolls to the correct anchor, but the menu stays open. How do I close it?
I assume that the following portion of the code is responsible for the mobile menu (but I might be wrong):
<script>
document.addEventListener("DOMContentLoaded", function(event) {
$('.mobile-nav-button.neutral-right-button').click(function(e){
$('.navigation-links.neutral-right-menu').toggleClass('show-menu');
$('body').css('overflow', $('.navigation-links.neutral-right-menu').hasClass('show-menu') ? 'hidden' : 'auto');
});
});
</script>
If this is the correct bit of code... what can I add to it in order to close the menu on a click?
Thank you very much!
Update:
I just checked with the completely unaltered template and it happens there as well. So it has nothing to do with what I did to the template. Here's how to recreate the behaviour using just the base template:
1. Open Tech Talk template
2. Preview index-page on browser
3. Shrink window to force mobile mode
4. Click on the "Subscribe" button to scroll down
5. Open mobile menu and click on "Episodes"
The Site scrolls to the Episodes, as it should, but the mobile menu won't close.
I just checked with the completely unaltered template and it happens there as well. So it has nothing to do with what I did to the template. Here's how to recreate the behaviour using just the base template:
1. Open Tech Talk template
2. Preview index-page on browser
3. Shrink window to force mobile mode
4. Click on the "Subscribe" button to scroll down
5. Open mobile menu and click on "Episodes"
The Site scrolls to the Episodes, as it should, but the mobile menu won't close.
Hi, I can confirm the issue, it happened to me too. I have a similar menu here: https://mock-up.coffeecup.com/va-comps/ … menu.html. It is working because of some Java script made by another user. I don't think you can add that js to your site, but maybe you can change out the menu? You can download it (probably the version for 'desktop down') and try it.
I have reported your problem to the staff member who created the template you are using.
I have reported your problem to the staff member who created the template you are using.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Before you start messing with Javascript, as I suggested in my first reply, take a look at this: https://eikweb.com/stuff/tech-talk-maybe-corrected.rsd
I found an attribute in the component of mine, that I adapted to the TechTalk template, and it seems to work. I hope it does not disrupt anything else in that template.
I found an attribute in the component of mine, that I adapted to the TechTalk template, and it seems to work. I hope it does not disrupt anything else in that template.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Hi Inger, thank you very much for your suggestions and your help. I'll try and look at the adapted template. Can you tell me what you did to it? I was pretty far in the process of designing the Site when I discovered the problem. To be honest, I dread starting from scratch again with an updated template. If there is any chance to somehow insert the changes into the work I've done so far, I'd be super happy.
Gordon F. wrote:
Hi Inger, thank you very much for your suggestions and your help. I'll try and look at the adapted template. Can you tell me what you did to it? I was pretty far in the process of designing the Site when I discovered the problem. To be honest, I dread starting from scratch again with an updated template. If there is any chance to somehow insert the changes into the work I've done so far, I'd be super happy.
Hi Inger, thank you very much for your suggestions and your help. I'll try and look at the adapted template. Can you tell me what you did to it? I was pretty far in the process of designing the Site when I discovered the problem. To be honest, I dread starting from scratch again with an updated template. If there is any chance to somehow insert the changes into the work I've done so far, I'd be super happy.
Make a copy of your project file (give it a new name)
In the new template from inger select the menu thingy and then the link 'episodes' go to the Element" tab and down to attributes
There is an attribute
data-event-onclick
with the value
if(window.innerWidth < 768){ document.querySelector(".navigation-links").style.display="none"; }
copy and paste that into your saved project file, check it out if everything is OK and works, save the project file with a new name (perhaps include the date or something) and use that as your new project file.
If it doesnt work properly or throws stuff out, then revert bck to your original project copy and delete the test project file.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/
A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/
A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
Great, thank you!
It does work! ... but I traded my old problem for a new one. After I click on a mobile anchor link with the new attribute, I can't scroll on the Site anymore and the mobile menu won't open again until I reload the page.
So it's not a full solution, yet. Any ideas on how to address the new problems?
It does work! ... but I traded my old problem for a new one. After I click on a mobile anchor link with the new attribute, I can't scroll on the Site anymore and the mobile menu won't open again until I reload the page.
So it's not a full solution, yet. Any ideas on how to address the new problems?
Gordon F. wrote:
Great, thank you!
It does work! ... but I traded my old problem for a new one. After I click on a mobile anchor link with the new attribute, I can't scroll on the Site anymore and the mobile menu won't open again until I reload the page.
So it's not a full solution, yet. Any ideas on how to address the new problems?
Great, thank you!
It does work! ... but I traded my old problem for a new one. After I click on a mobile anchor link with the new attribute, I can't scroll on the Site anymore and the mobile menu won't open again until I reload the page.
So it's not a full solution, yet. Any ideas on how to address the new problems?
Did you keep the attribute 'snooth scroll'?
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/
A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/
A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
I did. You think that's it?
EDIT: I took it out and nothing changed. The new problems remain, unfortunately.
EDIT: I took it out and nothing changed. The new problems remain, unfortunately.
@Wayan, where do you see an attribute 'smooth scroll' in that template? I can only find one called 'data scroll'.
@Gordon, I see the new problem that has arisen. I'll see if I can sort it out.
@Gordon, I see the new problem that has arisen. I'll see if I can sort it out.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
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.