Fixing Broke Parallax Pro Menu on iPad

Fixing a Broken Parallax Pro Menu on iPad

If you are using the Genesis Parallax Pro theme and have ran into a “broken” menu while viewing your site on an iPad, you can adjust the style.css file to correct this issue.

What is the problem?  Your menu has too many items for the 560px width, causing the menu to break into two or more lines like the image below.

Parallax Pro Broken Menu

What is the solution? To correct this, the width of the header widget area and site title will need to be set to 100%, causing the site title to stack over the menu.  This can be done within the theme’s style.css file.

parallax-pro-fixed-menu

This isn’t just for the iPad.  This issue can show up when the screen is between 960px and 1140px.  The logic used with this fix can be used with other Genesis themes that experience a “broken” menu.

Published by

rfmeier

Product developer at WPEngine and runner from Hampshire, Illinois. I work with php a lot; Spending most of my time digging into source code to see how it all works. You can find me on Twitter @rfmeier.

3 thoughts on “Fixing a Broken Parallax Pro Menu on iPad”

    1. Ryan,

      What resolutions are those screens? Have you inspected the css with Chrome Tools or Firebug?

      The code same I posted above will place the menu on screens below 1140px.

  1. The screen is Macbook Pro Retina 15-in 2880×1800 221 dpi.

    I used that code and it still wraps it below. I’m having a developer reduce spacing between menu items and between site title/logo in order to resolve the issue.

Leave a Reply

Your email address will not be published. Required fields are marked *