Why does the mobile version of Bushwick theme menu not work on iPad?

• 

  dpreuther · Member · Feb 20, 2014 at 10:01 pm

  • Copy link
  • Add topic to favorites

  My Bushwick theme based site works perfectly on desktops and my iPhone. The iPhone uses as expected the mobile layout, especially the menu. However, on the iPad the mobile layout is not being used. It is very hard to see the little menu icon instead of the menu bar that is used on the iPhone.

  I would like to have the same menu on the iPad as on the iPhone or change the color of the menu icon and make it the same dark color it is on the desktop. Any tips? Thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  kardotim · Member · Feb 25, 2014 at 8:53 am

  • Copy link

  Could you try to disable the mobile theme at https://teamdynamicsboston.wordpress.com/wp-admin/themes.php?page=mobile-options and then visit your blog again from your iPad? This way it should use the responsive Bushwick theme instead.

  Looking forward to your reply.

• 

  dpreuther · Member · Feb 25, 2014 at 1:37 pm

  • Copy link

  Thank you for your response. On the iPad I get the same look no matter whether the mobile theme is enabled or not: the banner image is being cut off at the top and bottom and the menu is hard to see. On the iPhone the disabled mobile / responsive theme creates the same look as the iPad always has. Almost sounds like the iPad is not recognized. It is the latest iPad Air.

• 

  kardotim · Member · Feb 25, 2014 at 5:00 pm

  • Copy link

  I see. The mobile theme works only with mobile phones. If the iPad is used the theme will show it’s own responsive design. Therefore it may look a little different than on the phone.

  Regarding the header:
  The theme resizes the header automatically depending on the window/screen size. The header is treated as one image and therefore doesn’t recognize nor resize the fixed text that’s part of this image.

  I recommend using a header image with less text or create a sticky post or static front page to write a welcome text:

  http://en.support.wordpress.com/posts/post-visibility/#sticky-posts
  http://en.support.wordpress.com/front-page

• 

  dpreuther · Member · Feb 25, 2014 at 5:06 pm

  • Copy link

  Understood. I had to make the text part of the image because it was all over the place and covered essential areas of the image (I guess this is a specific problem to image I am using) on mobile devices.

  Is it possible to disable the header image on the iPhone and iPad? I love it on the desktop version of the theme, that’s why I picked the Bushwick theme.

  Thanks,
  Dieter

• 

  kardotim · Member · Feb 25, 2014 at 5:17 pm

  • Copy link

  You can add this CSS code to your custom CSS to hide the header image on the iPhone and iPad:

  @media screen and (max-width: 800px) {
  	.site-header {
  	display: none;
  }

• 

  dpreuther · Member · Feb 25, 2014 at 5:54 pm

  • Copy link

  Hmmm … doesn’t do anything when the Mobile Theme is enabled. Cleared my cache, still nothing. I added a missing “}” at the end.

  Just using:

  .site-header {
  display: none;
  }

  makes the header on the desktop disappear right away.

  “Include this CSS in the Mobile Theme” is checked.

• 

  kardotim · Member · Feb 25, 2014 at 7:35 pm

  • Copy link

  Sorry about that, you had to to disable the mobile theme at https://teamdynamicsboston.wordpress.com/wp-admin/themes.php?page=mobile-options . I’ve just did this for you.