Jump to content


Photo
- - - - -

Nav Classic Menu is overlapping content on mobile phones

NavClassic mobile

  • Please log in to reply
5 replies to this topic

#1 alexg

alexg

    Newbie

  • Members

  • 3 posts
  • Country: Country Flag

Posted 06 September 2013 - 04:26 PM

My site is a work-in-progress and is located at:

Please Login or Register to see this Hidden Content

The Home and Contact screens are still empty. But if you click on one of the other menu items, there is content.

 

The Nav Classic menu is positioned too low and overlaps with the content area. It is leaving empty space between the logo and the Nav Classic menu. 

 

I have found this issue on iPhone 4 and iPhone 5. 

 

 

 

 

 

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 September 2013 - 07:48 PM

Actually, Firebug shows a 15px padding around the logo.

 

Add this to custom code:

Please Login or Register to see this Hidden Content

When I click the Blog link I cannot see the menu bleeding into the content in any way.

 

You can adjust the CSS like this, which I found with Firebug:

Please Login or Register to see this Hidden Content

There is padding in other parts of those pages you can find, correct, copy and paste to resolve via Firebug for Firefox or Chrome's Inspection Tools.

 

This should work. Add it to Site Options > Custom Code, on a new line below body {}.



#3 alexg

alexg

    Newbie

  • Members

  • 3 posts
  • Country: Country Flag

Posted 06 September 2013 - 09:08 PM

I put the first Custom Code in. And yes, it did remove padding around the logo with a desktop display setup. But it is not addressing the issue. (So I have removed it. 

 

The padding on a regular desktop computer was fine.

 

The problem is with the iPhone4 and iPhone 5 (and presumably on all other cell phone displays).

 

When PageLines adapts the pages for the mobile screens, it leaves a larger padding space between the logo and the Nav Classic menu.  And this then causes the Nav Classic menu to overlap into the area below.

 

Please look at it on an iPhone4 or iPhone5 (or perhaps another mobile phone with comparable display size).



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 September 2013 - 07:13 PM

You need to use Browser Specific CSS plugin to do this.  I do not have an iPhone or iPad to examine your site with. See

Please Login or Register to see this Hidden Content



#5 alexg

alexg

    Newbie

  • Members

  • 3 posts
  • Country: Country Flag

Posted 09 September 2013 - 01:21 PM

When I try to download the Browser Specific CSS plugin from the PageLInes Store, the links are broken.

 

Also, when I look at the Full List of Browser/Device Classes at 

Please Login or Register to see this Hidden Content

, it is quite a long list. 

 

My supplemental question is: Do I need to test my website with the full list? My expectation was that PageLines Framework is built on HTML5 and the adaptation to the mobile screens is automatically taken care. Can you give me some guidance on how best to handle this?



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 September 2013 - 05:31 AM

Nav Classic is not a responsive menu. NaveBar is, however, NavBar using Twitter Bootstrap, so many do not like its handling of parent level menu items. 

 

I've generally recommended to people seeking the same qualities as Nav Classic with responsiveness that they look into Ubermenu at codecanyon.net.  This will save you from doing custom CSS, because all the CSS is actually built into settings, which are vast, detailed and honestly, complicated. But with that complexity, you get a very dynamic, brilliant menu.