TwentyEleven Menu Appears To Break On iPhone When …

  • I am using a child theme to create a new site and have found that when the option to display text is set to No under Appearance – Header, the menu fails to render well on my iPhone. I have not checked other mobile devices It is fine when display text is set to yes.

    Working backwards to try to find the issue, I find that this is the case in the parent TwentyEleven (v 1.2) theme as well. The other issue I am seeing is that the search form is in the middle of the header image, but the child theme I am using allows me to turn the searchbar off, so it isn’t a big problem.

    Here are some examples of what I am seeing with the TwentyEleven parent theme enabled.

    With display text turned on:
    https://www.sherrydriedger.com/sledge/images/2011-5.png

    With display text turned off:
    https://www.sherrydriedger.com/sledge/images/2011-4.png
    Notice that the wording for Sample Page appears on two lines instead of one.

    Would anyone have an idea of how I can fix this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter NoLongerHere

    (@sdriedger)

    On the off chance that one of the child themes was playing a role in this issue, I have created a test site and installed a clean instance of just WordPress 3.2.1 which contains the TwentyEleven parent theme. The results are the same as can be seen in the screenshots from my iPhone below.

    Base install, no settings changed:
    https://www.sherrydriedger.com/2011/images/2011clean=1.png

    Base install, Appearance – Header – Display Text = No
    https://www.sherrydriedger.com/2011/images/2011clean=2.png

    I would appreciate any help available for fixing this so that I can continue work.

    Thank you

    Thread Starter NoLongerHere

    (@sdriedger)

    Might as well fully document this…
    The examples above have the show Header image set to Yes.

    Base install, Display Text = Yes; Header image = No
    https://www.sherrydriedger.com/2011/images/2011clean=3.png

    Base install, Display Text = No; Header image = No
    https://www.sherrydriedger.com/2011/images/2011clean=4.png

    If there are any other configurations needed to prove this issue out, please advise.

    Thread Starter NoLongerHere

    (@sdriedger)

    It appears I have found a work around for the above issue on an iPhone. I’ve not tested on other mobile devices, but I am assuming that the work around would be similar.

    First, set Display Text = Yes under Appearance – Header

    Then, add the following to child theme CSS:

    #site-title {
    display: none;
}

#site-description {
    display: none;
}

    This removes the display of the site title and description, but does not cause the menu to break on my iPhone.

    To adjust the header image and menu, use @media <device settings> in the child theme CSS.

    Not a perfect solution, but it appears to work.

    Thanks for posting this. Another possible solution is to remove everything in the child’s style.css following the line

    /* =Responsive Structure
----------------------------------------------- */

    up until 

    /* =Print
----------------------------------------------- */

    As suggested in this thread.

    Old post, I know. But I just switched my site from wordpress.com to www.remarpro.com and I’m having the same exact issues.

    When I was on wordpress.com, while viewing from a mobile device the menu became a drop-down menu. Which was great. But after importing my site in to www.remarpro.com, I’m having the same issue as sustainable.

    The search bar is on top of the banner image and instead of a nice drop-down menu, all the menu links are stacked on top of each other, taking up half the page.

    If anyone has found a way around this, please help me out.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘TwentyEleven Menu Appears To Break On iPhone When …’ is closed to new replies.