Off Canvas Sidebar closing issues
Hello Support Team!
On the menu page of a restaurant website i wanted to make a table of contents solution displayed in an off canvas sidebar. The content of the menu comes from a table, the headers got classic anchor ID-s in it.
In the widget area I've written the table of contents list using the anchors.
Website: http://molnarcsarda.aurorawebstudio.hu/etlap/
I can open the off canvas sidebar in any device, but I have two issues:
First:
- I open the Menu(Étlap) page,
- Click/tap on the sidebar icon
- Sidebar appears
- Click on any list item, for exaple "Levesek"
- The page scrolls to the right content, but the sidebar remains opened, so I canot scroll away until i close the sidebar.
How is it possible to close the sidebar when i click on a list item in the sidebar? Like in the video you made with the off canvas sidebar in woocommerce. These list items can be buttons as well if it works only that way.
Second:
If the first issue cannot be solved (and we have to close the sidebar every time with the sidebar button or clicking in the content), there is something wrong with it, but only in mobile devices.
When I choose from the list in the sidebar, i can see it scrolls to the correct position of the page. Then i have to close the sidebar.
In PC/laptop/tablet the position remains the same, but in mobile devices closing the sidebar makes it scrolling away from the right position. I attached some screenshot from the dev tools, but it is even worse in real mobiles as it scroll more away where it should be.
If you need any more info please tell me.
Best Regards,
Péter
Comments
Hello,
1) Please send us the WordPress dashboard and FTP access privately through the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact, and we will check what can be done with that.
Notice!
Please attach a link to this forum discussion.
Sending incorrect or incomplete data will result in a longer response time.
Therefore, please ensure that the data you send are complete and correct.
2) To correct that, please use the following CSS code:
@media only screen and (max-width:959px){ .mfn-ofcs-opened{ padding-right: 0!important; } }Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.
Best regards
Hello Phil!
I've sent the required infos as you have you asked.
The second issue is completly fine now with your suggestion, thank you!
I hope you can suggest a solution for the first issue as well. :)
Péter
We have made changes to your website to make it work, but you will have to change the widget with the list into a menu widget and create an appropriate menu for it.
Best regards
Hello Phil!
That's awesome! I really appreciate it!
Cool solution, exactley what i wanted.
Thank You very much!
Best Regards,
Péter
Hello Phil!
Can you tell me pls what file/files have you changed, or where can i find the modification?
If there will be an unpdate for the theme, will this function remain?
Thanks,
Péter
There is already an update with that feature introduced.
Note that it will work for the Navigation menu widget and when the page has the One Page option enabled.
Best regards
Hello Phil!
Thank You very much! :)