Mega Menu Shadow in Mobile

I’m setting up a Mega Menu in place of the standard Nav Bar. I am setting a shadow at 4 pts. In full width and tablet landscape it looks correct, but in tablet portait and mobile, there is a thin white line between the nav color and the shadow.

Any idea why or how to get rid of it? I don’t have a border set up.

Edit : I noticed it only appears when the menu is collapsed. When clicking on the “hamburger” the white line disappears.

Hi there @jthawke

Can you send me a ZIP file containing your project file so that I can have a look at this come Monday when I’m back in the office? When you do, point out the page that you’re working on where you’re seeing this issue so I can zero in on it.

Will do. It may be a day or two . . . I want to finish swapping out the header images, etc. first. It will make for a smaller file. I tried adding a new Mega Menu to another page and I see the same thing. It occurs right as the size changes from 783 pixels to 782 pixels and the text menu changes to the “bars” for mobile. At that point I see what appears to be a single pixel wide “border” at the bottom of the menu bar between the nav bar color and the shadow.

Edit : I created a new blank page to test and it happens at 767 pixels on this one with no other stacks installed.

Edit 2 : If you turn the drop shadow off, it appears to go away so it’s something with the drop shadow on mobile width.

Once I get ahold of your project file I’ll take a look at it and see what is going on there.

Can I assume that no one ELSE sees this behavior? I may try making a new project file tonight to see if it only appears in this current project.

For now I’ve just turned the drop shadow off. Probably isn’t necessary and doesn’t really look all that great on mobile anyway.

I’ve not had any other reports of this, but it doesn’t mean it isn’t a bug, or some sort of other interaction with elements on the page. I can troubleshoot it pretty quick probably with the project file in-hand.

Great, thanks. I’ll make a quick project using Foundry and Mega Menu and see if it appears. If not, then I’ll send the project with the issue. As it happens on a new blank page with just Foundry and MM, then it seems like there might be something else at play here.

Whatever works for you. I’m fine troubleshooting what you have now by just sending over the project file to keep from making more work for you.

Adam - I created a very simple one page project with just the Foundry CC and MM. I see the same thing. It’s only 55kb. What’s the best way to get it to you? I could easily email it at that size.

You can send it via email to adam at elixirgraphics dot com or you can send it as a Dropbox link here or in a direct message on the forum. Your choice. Anything works for me.

It’s on it’s way. I just set both the desktop and mobile nav background color dark, text light so you’ll be able to see that thin line when viewing iPhone or iPad portrait. Click on the icon to see the menu drop down and the line disappears. At least on mine it does. :slight_smile:

Got your project file, and took a look over it and did some testing. As I mentioned to you in my email, I think I narrowed in on the problem. I’ll work up a fix and it will go out in the next update for Potion Pack.

2 Likes

Thank you, Adam. I appreciate how well you support your products!