It has been a few updates since I have checked the functioning of the mobile menu. It worked fine before, but now I cannot close the mobile menu.
This issue exists in both the desktop and mobile browsers.
I checked/tested the following:
Custom CSS by deleting all of it > the issue remains,
Deactivated all plugins except Penci plugins > the issue remains,
Removed my custom PHP > issue remains,
Checked it in Firefox and Chrome > issue remains.
I researched the CSS via the browser inspector > could not find a CSS cause.
I reviewed the HTML structure > Found the Cause.
== Cause of the Mobile Menu Not Closing ==
The issue, as I have found it, is a duplicate HTML entry for the mobile menu. There are 2 of the exact same HTML entries, both with the same ID name "close-sidebar-nav".
The duplicate (two) HTML entries is this one:
<a id="close-sidebar-nav" class="header-6"><i class="penci-faicon fa fa-close"></i></a>
When I deleted the ID name "close-sidebar-nav" on the second HTML entry, the mobile menu works and I was able to close it.
It is the duplication of the ID name that is causing the issue.
The image named "1-Faulty-Mobile..." is the screenshot of the browser page using Firefox in "responsive-design-mode".
The image named "2-Faulty-Mobile..." is the extract of the first screenshot image.
The blue highlighted HTML (the second HTML entry) in both screenshots is the cause of the issue.
== Testing of the Double HTML entries ==
I tested these entries, using the browser inspector mode:
Deleting the first HTML entry makes no difference, the issue remains.
Deleting the second (highlighted) HTML entry (especially the ID name) > issue is resolved, the mobile menu works. (the only thing is the black background color becomes more transparent and needs adjustment).
== Which Theme File is causing it?==
I could not located the theme file that is causing this issue, but something in the theme coding is doubling the HTML entries, especially when the same ID name cannot appear twice on the same page.
== Request for Temporary Fix ==
Do you have a fix for this to correct the main theme files?
This would be the best method because when the theme is updated again, it can over-write the fixed file with the updated correction.
In the latest update, we've move the mobile menu to the footer. It seems you're using the child theme and modify the header.php file and it doesn't update the code inside header.php file from the latest version.
So, please:
1/ Back up the changes you did on the header.php file.
2/ Copy the header.php file from the parent theme of the latest version and paste it override to header.php file from the child theme
3/ Put again the changes to the header.php file you did for the child theme before.
BUT: We have options to allows you can put the custom codes inside <head> and after open <body> tag via Customize > General > Logo & Header - so, if you need to put something inside <head> and after open <body> tag, you can use those options - that's better much than use the child theme to modify the header.php file.
Yes, when I saw Penci add the feature as mentioned in your "but" entry of your post, I did that a couple of updates before. I moved my Google AdSense script to the Customizer Logo & Header module and removed the same script from the head.php file in my Child-Theme folder.
What I did not do (late in doing) was remove the head.php file from my Child-Theme folder since it was not needed.
I guess your reply helped me catch up to some late cleanup. I now deleted the head.php file from my child theme and now the mobile menu - close works. ~ Thanks.
It has been a few updates since I have checked the functioning of the mobile menu. It worked fine before, but now I cannot close the mobile menu.
This issue exists in both the desktop and mobile browsers.
I checked/tested the following:
I researched the CSS via the browser inspector > could not find a CSS cause.
I reviewed the HTML structure > Found the Cause.
== Cause of the Mobile Menu Not Closing ==
The issue, as I have found it, is a duplicate HTML entry for the mobile menu. There are 2 of the exact same HTML entries, both with the same ID name "close-sidebar-nav".
The duplicate (two) HTML entries is this one:
When I deleted the ID name "close-sidebar-nav" on the second HTML entry, the mobile menu works and I was able to close it.
It is the duplication of the ID name that is causing the issue.
Attached are two screenshots:
1-Faulty-Mobile-Menu_Will-Not-Close_Double-HTML-Entry=Cause.jpg
2-Faulty-Mobile-Menu_Will-Not-Close_Double-HTML-Highlighted.jpg
The image named "1-Faulty-Mobile..." is the screenshot of the browser page using Firefox in "responsive-design-mode".
The image named "2-Faulty-Mobile..." is the extract of the first screenshot image.
The blue highlighted HTML (the second HTML entry) in both screenshots is the cause of the issue.
== Testing of the Double HTML entries ==
I tested these entries, using the browser inspector mode:
(the only thing is the black background color becomes more transparent and needs adjustment).
== Which Theme File is causing it?==
I could not located the theme file that is causing this issue, but something in the theme coding is doubling the HTML entries, especially when the same ID name cannot appear twice on the same page.
== Request for Temporary Fix ==
Do you have a fix for this to correct the main theme files?
This would be the best method because when the theme is updated again, it can over-write the fixed file with the updated correction.
Thanks
Hi,
It's not the problems from the theme itself.
In the latest update, we've move the mobile menu to the footer. It seems you're using the child theme and modify the header.php file and it doesn't update the code inside header.php file from the latest version.
So, please:
1/ Back up the changes you did on the header.php file.
2/ Copy the header.php file from the parent theme of the latest version and paste it override to header.php file from the child theme
3/ Put again the changes to the header.php file you did for the child theme before.
BUT: We have options to allows you can put the custom codes inside <head> and after open <body> tag via Customize > General > Logo & Header - so, if you need to put something inside <head> and after open <body> tag, you can use those options - that's better much than use the child theme to modify the header.php file.
Best Regards,
PenciDesign
Thanks for the quick reply :)
Yes, when I saw Penci add the feature as mentioned in your "but" entry of your post, I did that a couple of updates before. I moved my Google AdSense script to the Customizer Logo & Header module and removed the same script from the head.php file in my Child-Theme folder.
What I did not do (late in doing) was remove the head.php file from my Child-Theme folder since it was not needed.
I guess your reply helped me catch up to some late cleanup. I now deleted the head.php file from my child theme and now the mobile menu - close works. ~ Thanks.
This ticket is now resolved :)