Mobile Twenty Eleven Option

We were talking before the WordPress London meet-up and the subject of how twenty eleven looks on a mobile, as the WordPress twenty eleven theme is responsive the images all resize, and the content stacks.

One of the main issues is the way the menu wraps, there are solutions out there being developed to make the menu change, so we can hope the menu issue get resolver at a later date.

We thought about what we could change just using a child theme, and have come up with the following solution, we copied some the contents of header.php to a template part, moved the search, created a new style for the title and description, added a header widget area just for mobile devices, and we also added a widget to display images with links in the widetized areas.

We added new menu location and  two menu styles for mobile devices, when the screen get to a smaller size the menu items resize to 50%, when it gets even smaller it they become full width.

Not the best of solutions, but it will tidy things up for now!

 Mobile Menu Child Theme

Resize the Browser

Lets have a look at screenshots of different sizes without the header widget, here a screenshot with the 50% menu items.

mobile-header-1

If we have a smaller mobile device the menu item change to 100%, to avoid the wrapping.

mobile-header-2

The Styles

If you are happy with how your theme displays except the menu, these are the styles to add to a child theme, to get the effect above.

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */
@media handheld, only screen and (max-width: 767px) {
   #branding #access li {
      font-size: 14px;
      width: 50%;
      text-align: center;
  }
} @media handheld, only screen and (max-width: 467px) {
   #branding #access li {
      font-size: 14px;
      width: 100%;
      text-align: center;
   }
}

Mobile Menu

Another problem can be the number of menu levels, so in our solution we have added a new menu location for our Mobile Devices.

We can now create a menu just for our mobile visitors, if you are not familiar with custom menus, just use Google or Youtube and search for WordPress Twenty Eleven Menus.

mobile-header-3

Header Widget Area

For our mobile header we have added a new widget area and image widget, if the header widget area has any widgets the header image will not show, this means we can present our mobile users with different header content.

Let us have a look, we will need a image url, lets us upload an image to use as a header when our mobile users visit our website, we upload an image and copy the URL.

mobile-header-4

Image Widget

This widget is to display an image in any widgetized area, we have the image url and we can now add a link and align the image, notice the widget title is blank.

mobile-header-5

If we visit our website and re-size the browser we can see that the image has replaced out header, this can be any widget and content that is responsive and where the content will re-size, for a mobile.

mobile-header-6

That will look better on a mobile device, we can also use the image widget anywhere in our widgetized areas, in this example we are holding an event, we want a clickable image in our sidebar.

mobile-header-7

Now we have a nice image in our sidebar inviting visitors to view our events page.

mobile-header-8

How it Works

We have a template part which is hidden by default, in the stylesheet, we toggle our header with the main website header.

@media handheld, only screen and (max-width: 767px) {
   #branding-mobile,
   #mobile-widget {
      display: block;
   }
   #access,
   #branding {
      display: none;
   }
   #branding-mobile #access {
     display: block;
  }
}

We hope you will enjoy our child themes and learn from the code.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

6 thoughts on “Mobile Twenty Eleven Option

  1. Thanks for this guide. I know there’s alot of people who don’t care for how the menu is displayed on mobile devices and this seems like the best solution I’ve found so far.

  2. Hello,
    at first sorry for my English. Normally I don’t use this language.

    I like this guide about mobile menu. But I have problem with Image Widget and Mobile Header Area. I can’t see it in my admin/appearance/Widgets. I can’t find it too in Plugin finder (searcher). Can you help me.
    Thanks so much.

  3. Pingback: Opinions for NomNom Mobile view needed | Zeaks Blog

  4. THANKS!
    This worked perfectly for a simple Twenty Eleven Child theme I am working on. Why wouldn’t this be something worked into the default theme already? It seems like it’s not quite responsive without a menu that also adjusts.

  5. Hm, indeed that doesn´t work well with sublevel menüs.
    But the following code solved that for me:

    #branding #access ul li ul li, #branding #access ul li ul li ul li {
    width: 100%;
    }

    Thanks for the info above though, helped me a lot!
    Thomas

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More