Twenty Eleven, Nav Bar Wrapping on iPad

  • Resolved mmphelps1970

    (@mmphelps1970)


    8 years, 6 months ago

    I’m running my website, http://www.relaxandplaypiano.com, on Twenty Eleven, and I want my menu nav bar to appear on one line, but it wraps on the iPad. (I’m running a mobile site generator plugin, so this is a non-issue on smartphones). Following this person’s advice, I inserted this code at the end my Child Theme style.css:

    /* Menu Fix to Full Width*/
    body {
    padding: 0 0;}

    #page {
    max-width: none;}

    #branding, #main, #footerMenu ul, #access ul {
    width: 1000px;
    margin: 0 auto;
    }

    That fixed the problem on all my pages except my FAQ page which is generated by the plugin “Q and A Focus Plus FAQ”. My FAQ page has the appearance of being zoomed in so that the website banner is cut off on the right.

    All help is appreciated! Thank you so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter mmphelps1970

    (@mmphelps1970)

    8 years, 6 months ago

    I removed this code from the bottom of my Child Theme .css:

    /* Menu Fix to Full Width*/
    body {
    padding: 0 0;}

    #page {
    max-width: none;}

    #branding, #main, #footerMenu ul, #access ul {
    width: 1000px;
    margin: 0 auto;
    }

    That returns the condition where my nav bar wraps on the iPad, but now the FAQ page (and also the Contact Me page which is populated by a plugin) looks the same as the other pages and also has a wrapping menu nav bar.

    Tried installing the plugin “Custom Content Width” and setting the custom page width to 1000 but it had no effect at all.

    Still trying. Would love some help. Really need for the site layout to stay consistent between desktop/laptop and tablet.

    Thread Starter mmphelps1970

    (@mmphelps1970)

    8 years, 6 months ago

    I also tried this code at the end of my Child Theme .css, which was suggested here:

    /* makes page width 1000px */
    .one-column #page {
    max-width: 1000px;
    min-width: 1000px;
    }

    It moved one of the two wrapped menu items back to the top line, but left the last menu item wrapped to the second line. I tried adjusting to 1200px, 1500px, and even 3000px, but couldn’t get a different result.

    Thread Starter mmphelps1970

    (@mmphelps1970)

    8 years, 6 months ago

    Tried this too, suggested in this WP Support form, and no results:

    @media (max-width: 1000px) and (min-width: 768px){
    .navbar-wrapper.container{
    width: 1000px;
    }
    }

    Thread Starter mmphelps1970

    (@mmphelps1970)

    8 years, 6 months ago

    Figured it out! I’ve lost an entire day of my life, but it works perfectly now.

    Thanks to TRIBALIZ at this post:

    Fix for menu wrapping into two lines in Twenty eleven WordPress theme

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Twenty Eleven, Nav Bar Wrapping on iPad’ is closed to new replies.