Support » Themes and Templates » making the width of the twenty eleven theme more compact?

  • hi,

    i’m trying to make the layout of my site, built with the twenty eleven theme, more compact.

    here’s a link to my site:

    and here’s a link to a site that is exactly what i would like to accomplish, except i would like to have a sidebar. sample site:

    i’ve found the following bit of code but i’m not sure how to change it to achieve what i want or if it’s even the right code.

    #primary {
        float: left;
        margin: 0 -26.4% 0 0;
        width: 100%;
    #content {
        margin: 0 34% 0 7.6%;
        width: 58.4%;
    #secondary {
        float: right;
        margin-right: 7.6%;
        width: 18.8%;

    yes i use firebug, have been searching the forum, and i have a child theme.

    thanks in advance.

Viewing 5 replies - 1 through 5 (of 5 total)
  • She has her max width for the page set at 690px. you can do that as well by simply changing the style at line 325 in your style.css.

    #page {
      background: none repeat scroll 0 0 #FFFFFF;

    and add this

    #page {
      background: none repeat scroll 0 0 #FFFFFF;
     max-width: 690px;

    It would be best to create a simple child theme for this so that you dont lose your changes when you update the theme.

    thanks that worked…i already have my page set up as a child theme (as stated in the last line of first post 😉 )

    is there any way to get the longer menu items on two lines now that it’s a narrower width (requests from my client lol)

    for example,

    Machinaal mini-graafwerk

    to readl ike this instead?:


    i guess i’ll need to start another thread for this lol.

    You can, there are 2 ways, one is to be really good with html and css and know your way around the menu system in Wp,
    The simpler way would be to first create a secondary menu area in your theme files right under the main menu and add secondary menu function to that one, you will need to add the functionality for that new menu in your functions.php file if its not there, then you would simply remove the larger items from your main menu in the dashboard and add them to the secondary menu that you just created and it will display right below the new top menu as a second menu. Wah-lah, new menu, lol. Its very easy to do.

    you lost me with creating the functions. i know about functions but not what i’d need to do to add that in.

    I would create another div container like the menu div and place it right up under the original menu container. You may have to adjust one or 2 things in your stylesheet to do it – Like the height of the container the menus are resting in or something like this (maybe a padding or margin or something). ead thios page first before doing anything below “
    Anyways, your going to want to copy the menu code from your header or index.php into your new secondary menu container, so now you will have 2 menus displaying the same things (the main menu). Your going to want to change the primary to secondary like this.

    <?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>

    to this

    <?php wp_nav_menu( array( 'theme_location' => 'secondary-menu' ) ); ?>

    Then open your functions.php and register the new sidebar where your first sidebar is registered. You can look at this page to read about it if you need to, its fairly easy. Once you have your new secondary menu in place and working, simply activate it in your wp-admin dashboard and remove the links from the main menu and add them to the secondary menu and wah-lah, a second row to your menu with out making a mess of the original menu, lol. If your still having issues, then read this page to get your secondary menu activaTED and running the dashboard.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘making the width of the twenty eleven theme more compact?’ is closed to new replies.