Jump to content

Archived

This topic is now archived and is closed to further replies.

alexg

Nav Classic Menu is overlapping content on mobile phones

Recommended Posts

alexg    0
alexg

My site is a work-in-progress and is located at: http://www.quovisconsulting.com/blog

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. 

 

 

 

 

 

 

Share this post


Link to post
Share on other sites
Rob    547
Rob

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

 

Add this to custom code:

#header .content .content-pad {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}

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:

#highlight .content-pad .highlight-area {
    padding: 1px 0 10.5px;
}

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 {}.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
alexg    0
alexg

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).

Share this post


Link to post
Share on other sites
alexg    0
alexg

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 http://support.pagelines.me/docs/plugins/browser-specific-css/, 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?

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×