Jump to content
lbhansen

MegaNav Not Properly Responsive in Mobile Browser

Recommended Posts

lbhansen

I have two variations of MegaNav on a page. In the header, MegaNav has a 940 pixel wide logo. In the footer, it has a 144 pixel logo.

On my Windows Phone 8.1 the header menu is not shrinking enough to fit the screen. I need to scroll left to see the menu icon on the right. If I manage to press the menu icon, the menu slides in from the right as expected but ...

  • it's difficult to activate the menu. (maybe a phone problem?)
  • Also, the search function is missing completely.

The footer menu looks pretty much as expected. The menu icon is away from the right edge of the display. As with the header menu, there is no search function.

Share this post


Link to post
Share on other sites
Andrew

can you post a screenshot? this may be a windows issue

Share this post


Link to post
Share on other sites
lbhansen

Andrew,

Attached are images of how it looks in Edge and
on WP:

  1. initial view
  2. scrolled left
  3. menu open

 

MegaMenu Sample 1.png

wp_ss_20160206_0001.jpg

wp_ss_20160206_0002.jpg

wp_ss_20160206_0003.jpg

Share this post


Link to post
Share on other sites
Andrew

does it look ok on IOS?

Share this post


Link to post
Share on other sites
lbhansen

On my wife's iPhone 4 the logo appears along with the menu icon ("hamburger"?), i.e. appearance is pretty much as expected.

However, it is almost impossible to tap the icon properly to bring up the menu. After dozens of taps, I've only seen the menu one time.

When I finally got the menu to appear, there was no way to close it without selecting a menu item. (In the WP browser, I was able to close the menu by tapping in the page area to the left of the menu.

The search feature still doesn't appear.

 

Share this post


Link to post
Share on other sites
nfp1900

I'm getting the same issue  iOS 9.2.1 (5s) the menu doesn't respond at all. I think I got it open up once

Share this post


Link to post
Share on other sites
Andrew

ya there's a bug that is only appearing in mobile browsers, the chrome tools didn't pick it up. Anyway, i'm downloading the emulator now to fix.

Share this post


Link to post
Share on other sites
Brian

It'd be great to have a "X" to close the menu. Or the hamburger changes to an "X" when menu is open.

Share this post


Link to post
Share on other sites
JudithKlinger

The menu works  fine on my phone. IOS v.9.2.1 Tap to open the hamburger & it opens. 

But it squashes the one long menu name. See screenshot. 

IMG_5297.PNG

Share this post


Link to post
Share on other sites
nfp1900

any update when the meganav might have a new version? I'd like to get the logo and menu responsiveness working soon, thanks

Share this post


Link to post
Share on other sites
navigador

I have the same issue. Additionally, the footer nav menu is now the hamburger instead of menu text links.

Edited by navigador (see edit history)

Share this post


Link to post
Share on other sites
Andrew

@navigador we had complaints about the former approach, i should make this an option in menus. 

 

@nfp1900 before i look into this, again the issue is that the image leaks into the menu at mobile dimensions?

Share this post


Link to post
Share on other sites
navigador

It might be best to show you the URL, rather than take many screenshots.

 

if you take a look at https://nicolakimberlin.com - you can see it's fine until you view on mobile (iPhone 5s for me). The logo encroaches so close to the hamburger that's nigh impossible to select any menu option.

The menu in the footer (normal menu not meganav), is also a hamburger, but as I have social icon container underneath, the menu items autoclose. 

Not sure what optimum dimensions for logo so I used the same as PL logo.

Thanks for investigating

 

I can send you admin login if required.

 

Edited by navigador (see edit history)

Share this post


Link to post
Share on other sites
lbhansen

FYI, the problem with https://nicolakimberlin.com appears to be the same on my Windows phone, Lumia 830. The burger is only a few pixels wide, at the far right side.

Share this post


Link to post
Share on other sites
Andrew

Pushed some tweaks to fix this, if that doesn't work then i'll have to consider a new mobile layout .

Share this post


Link to post
Share on other sites
navigador
58 minutes ago, Andrew said:

Pushed some tweaks to fix this, if that doesn't work then i'll have to consider a new mobile layout .

That will most certainly do for now Andrew - cheers

Any ideas on the footer menu hamburger as it still does not expand 

Share this post


Link to post
Share on other sites
navigador

@Andrew thanks for the toggle for footer menu.

Share this post


Link to post
Share on other sites
hibbsy78

I now seem to have issues with the logo on mobile devices. Logo now forcing hamburger menu off screen!

Needs an urgent fix!!

IMG_8192.PNG

IMG_8193.PNG

Edited by hibbsy78 (see edit history)

Share this post


Link to post
Share on other sites
hibbsy78

I have reverted back to MegaNav 5.0.8 from 5.0.10 on both of these sites due to them being high traffic & live.

I have left http://vikihibbs.com on 5.0.10 so you can see the issue live.

Share this post


Link to post
Share on other sites
nfp1900

I found on one site that the 5.0.10 menu is more responsive but the scaling of the logo is still not correct in portrait mode. In landscape it's correct

IMG_6489.PNG

IMG_6490.PNG

Share this post


Link to post
Share on other sites
hibbsy78

Any more progress on this one? The amount of sites viewed on mobile is ever increasing so this is a big issue.

Share this post


Link to post
Share on other sites
navigador

@hibbsy78, I just experimented with your logo and got it to work. Don't ask me why, but if you export your current logo in a bounding box of dimensions 819px x 196px (yes you might have to resize slightly), then it works. I came up with this idea by looking at the dimensions of the PL logo and saw that when I changed logo to the same dimensions, it too worked.

Let me know if it fixed it.

Edited by navigador (see edit history)

Share this post


Link to post
Share on other sites
nfp1900

so maybe we can have confirmation if we need to scale any meganav logo to specific dims to ensure that it adapts to both portrait and landscape...

  • Like 2

Share this post


Link to post
Share on other sites
hibbsy78

Anymore on this.. I can't believe everyone is happy with this on mobile as it is?

  • Like 1

Share this post


Link to post
Share on other sites
nfp1900

I'm still waiting to see fix there will be for the logo in meganav when changing from landscape to portrait. Or failing that some info about the exact dimensions required to get this to work.

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×