Jump to content
Sign in to follow this  
Keith Vaugh

NavBar portrait mode iPad

Recommended Posts

Keith Vaugh

Hi Folks

 

Is anyone aware of a solution or a method of stopping the NavBar wrapping onto the next line when in portrait mode on an iPad. It's perfect when in landscape. Is there a method of specifying its max width ONLY when an iPad in portrait mode is detected. I guess you'd have to detect the orientation of the iPad also. Can't seem to located anything in the forums.

 

Thanks in advance

Share this post


Link to post
Share on other sites
Rob

Hi Keith,

 

Is your site set up to be responsive or did you tick the option to disable mobile view?

 

If this is magva.com we're speaking about, there's the possibility that the hook or addition of the shopping cart total is causing this issue.  Can you confirm the site?

 

Thanks.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Keith Vaugh

Hi Rob

 

The mobile view is enabled. The site in question is belmonthousestud.com but am working on a clone of it while I migrate it from PlatformPro Belmonthousestud.com/BHSclone Its working fine on a mobile, just not on the the iPad. The Navbar appears as it would on a regular web browser.

Share this post


Link to post
Share on other sites
Rob

Keith,

 

I suspect (without seeing it) that there's something in the menu causing it to wrap under certain circumstances.

 

Three things could cause this.

 

1.  There is an image that is being scaled down in the menu or, the branding image is pushing the navbar. 

2.  The text/font in the menu is large, and needs to be resized to meet the mobile view's needs.

3.  There is some code affecting the navbar which is causing the wrap in iOS.  Do you have an iPhone too?

 

I doubt it's a plugin conflict, so I won't ask you to disable (yet). :)


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Keith Vaugh

I think its relatively simple in so far that in its the width of the NavBar. 

 

Works find in landscape mode, only in portrait mode wraps onto the next line. On an iPhone its fine (the menu drop is functioning) 

Share this post


Link to post
Share on other sites
Rob

Keith,

 

My best guess is that in the portrait mode, the browser doesn't have sufficient room for the links on one line.  The solution would be to use browser-specific CSS to change the font-size down so that it fills less space.

 

I don't know the names of the links, but you may want to reduce the label names. That can help considerably.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Keith Vaugh

Might have to go that route. Its a minor detail for the moment, so will keep searching for a solution. What I might try and find is a method of detecting if the iPad is in portrait or landscape mode and if in portrait have a popup appear recommending the site be viewed in landscape mode!

Share this post


Link to post
Share on other sites
Rob

Keith,

 

It might just be easier to use the browser specific code method to reduce the font size for the navbar in iOS only. Finding code to detect the layout might be more of a challenge than you think.


Former PageLines Moderator, Food Expert and Raconteur

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

Sign in to follow this  

×