This website (ucpsd.org) uses Mega Menu. Mac Browsers are fine. PC browsers display as shown in the attached photo, but mostly on submenu pages. Once the menu becomes sticky, the content displays.!
Unfortunately @dcsillag, “PC browsers” doesn’t give us much to go on in helping to troubleshoot your problem. We need to know what browser(s) and the specific version numbers of those browsers. Additionally we also need to know what operating system (eg: Win 10, etc).
Also, you’ve got some errors on your page that are unrelated to Foundry specifically it seems, see below. Clearing up these problems with your content could possibly help in solving your problem.
When testing things such as this it helps to have a simple starting point. My suggestion to troubleshoot this from your end would be to build a simple page with just plain content. A Mega Menu, maybe some columns of plain text, etc and then try and see if the problem is seen there. If not then it could be related to your content specifically. You can then go back and create a duplicate test version of your current, more complex project. Publish it as a test and start removing a few things at a time to narrow in on your problem. Once it clears up you may have found the content that is causing you problems.
Additionally, if you’ve added any custom code to your page (javascript, css, html, etc) that isn’t a part of Foundry, you might double-check your work there to make sure you didn’t miss anything in the custom code or have any conflicts.
If after troubleshooting you still have issues, please provide us a copy of your project file, in a ZIP file via a download link on WeTransfer or a similar service and we’ll take a look at it for you.
1 Like
Thank you for the help. Sorry, I should have provided more detail and sent you directly to an affected page, which is also a simpler design.
The issue is on (all) pages contained in the submenus, such as:
https://www.ucpsd.org/mission/
Mac OS is fine on all browsers. On Win10: Edge v92, Explorer v11 and Opera v77 are fine. Chrome 92 and Firefox 90 have the issue. Once you scroll down so the menu becomes sticky, the content is displays normally. Turning off sticky just prevents the page from displaying normally.
On the following test page, I removed the menu from the above page (mission) and the page loads normally in Chrome and Firefox.
https://www.ucpsd.org/test
Also removed the code you noted above, but it did not make a difference.
In further testing, if I add a fresh stock Mega Menu to the test page, it’s fine. If I then add a drop down section, the problem is introduced. See:
https://www.ucpsd.org/test2/
Thank you for the further information.
Out of curiosity – are you seeing the same problem with the Mega Menu sample page, here: Mega Menu | My Website
In your testing did you try the above suggested process? You can do this with your simplified project file as well.
Send me the requested ZIP file containing your simplified project please. Instructions are quoted above from my initial reply. When I have that in hand and I’m back in the office I can take a look at it.
1 Like
I do not see the problem on your sample page.
I did create a duplicate and removed items one at a time. Could not resolve it.
Here is the zip:
And thank you!
First thing I noticed in your project file you sent was that you’re missing a closing tag in your custom code, here:
So I went ahead and removed that code from the <head> altogether for testing purposes.
I then took your project file and stripped out everything except the Mega Menu stack on the “test2” page and published it. I loaded up Win 10 natively on my Mac via VirtualBox and installed FireFox and Chrome. The latest version of FireFox when I downloaded was v93 and Chrome was v94.
Here’s a link to the page in question: Mission and Vision
The page navigation worked as expected in both FireFox and Chrome.
So next I tested with your content and I do in fact see what you’re seeing. The content is being pushed off to the side. This is being caused by an overflow: visible that is getting applied to the navigation bar. This is what allows the drop down to appear outside of the navigation bar and not be hidden. Why this is working on my demo page and not your project I am not sure of yet. I will have to dig into it deeper. Something must have changed along the way with these two browsers that caused this errant behavior, as they worked properly before (and still seem to in specific situations – see my demo page as an example of this).
I’ll need to look at what is causing it and how I can work around this idiosyncrasy in these two browsers, while not breaking the browsers that are working as they should be.
So with that I would like to enlist the help of some of the Foundry users out there that have project files that use Mega Menu. If you use Mega Menu in a project file, can you send me an email and include two things:
- A download link for a ZIP file containing your project file. Just create a ZIP file containing your project file, then use WeTransfer or a similar service to create a download link for me.
- A link to the live site that is built using this project.
You can send that email to adam at elixirgraphics dot com
Just make the subject line something relating to Mega Menu.
This will allow me to test against a few different project files so I can hope to not break existing projects with any changes I make.
Also @dcsillag – If you can email me as well. That will let me send you a test version of Potion Pack when I get something worked up as a test.
2 Likes
Thank you for the support, Adam. Much appreciated.
This issue was resolved quickly. Shout out to Adam for the excellent products and top-notch support!
1 Like
Glad that fixed it for you. Keep an eye on it for the time being. Also if anyone else has a project file using Mega Menu that they could share with me I’d be grateful. I want to test against other projects before sending this update out far-and-wide to ensure I don’t mess up anyone’s projects.
1 Like
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.