Jump to content

Archived

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

michaeldallas

iPad Portrait - Menu and other elements disappear

Recommended Posts

Danny

Hi,

 

What do you mean ? As I don't have access to my iPad at the moment, but I used the Resizer Bookmarklet and your navigation is certainly there.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
michaeldallas

Here's a pic from an iPad.

Share this post


Link to post
Share on other sites
michaeldallas

Here's a pic from an iPad.[attachment=2241:image.jpg]

Share this post


Link to post
Share on other sites
Danny

Thats how the menu is supposed to work, its hard to see what you're actually trying to demonstrate from that image as its on the small side. However, when you view your site on a mobile device such as an iPad or iPhone or similar devices, then the navigation links will disappear and will be replaced with the mobile menu, which you access using the hamburger logo (three lines on top of one another).


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
michaeldallas

Is there any way to control this responsive behavior? It's not what I want.

Share this post


Link to post
Share on other sites
Danny

Unfortunately, it would require removing all responsive CSS i.e. media queries from your navigation section. This is something I wouldn't recommend, as the majority of your visitors will likely be viewing your website on a mobile device such as a phone or tablet and this number is only going to increase. This is why a lot of websites and frameworks are going mobile first, meaning that most of the layout has been designed with mobile devices in mind.

The navigation is such an example, if you remove the the CSS that controls how the navigation displays on mobile devices, what will happen is that all your menus will display the same way they do on a desktop PC/Mac and will look rather odd. It will also likely be difficult for users to navigate through your website, that is why the most websites that are responsive use such a method.

 

Here are just a few examples:

 

http://getbootstrap.com/

http://foundation.zurb.com/

http://en.blog.wordpress.com/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
michaeldallas

Okay.  

 

Here's the question. Can I just change the responsive behavior for Portrait iPad Viewport mode only?  In other words, in that mode, just keep the regular menu rather than the "hamburger" one.  In my design, there is room for the regular menu and the "hamburger" is not needed in that mode.  Also, other elements that I would like to keep disappear as well.

 

I have been using the (competing) Headway Theme. In that application, there are a variety of built-in Viewport mode Classes.  For example, one Class is called (something like) "ipad-portrait-responsive-hide."  I can then use the app to show or hide a div element based on the mode of the Viewport.

 

Are there any Viewport controls for Pagelines?  

 

As you pointed out, this control issue becomes more important as the number of devices increases.

 

If this is a topic that has already been addressed, just post the links.  Thanks for your help.

Share this post


Link to post
Share on other sites
michaeldallas

If there is not a built-in Pagelines control, could this behavior be controlled with CSS?

Share this post


Link to post
Share on other sites
GetMeWebDesign

@michaeldallas Use Browser/device specific classes http://docs.pagelines.com/tutorials/browser-specific-css or more general @media


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
michaeldallas

Just for the record, I consider this to be poor design.

Share this post


Link to post
Share on other sites

  • Similar Content

    • Liv Kundalini
      By Liv Kundalini+
      Hi -
      Pulling my hair out over here, and would love an assist!
      Site I am building, http://www.livkundalini.com/home, has a problem with the submenu items in the nav not appearing. 
      If anyone wants to see what the Nav should look like, feel free to look in the footer on the left hand side.
      Have tried disabling Pagelines and using the twentyseventeen theme, but problem persists.
      Saw this error (pasted at the bottom of this post) displaying in the inspector, and saw discussion of Jetpack potentially being a culprit. Disabled Jetpack, but the problem persists.
      Had the hosting company even flush the server-side cache, but no avail.
      Any thoughts? Please? It's the only thing keeping me from launching this site!
      Many Thanks,
      Todd
       
      WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403   O @ (index):7
    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      apprendre-le-russe-avec-ania.fr
      Thank you in advance !

    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
×