Twenty Eleven Theme – Change Sidebar Width

This post has been updated with a better explanation, please visit http://zeaks.org/twenty-eleven-sidebar-width-explained-and-2-bonus-layouts/
Here I’ll show you how to change the sidebar width of Twenty Eleven theme. Twenty Eleven uses a fluid width, so widths are defined as percentages instead of pixels, which can be a bit confusing if you’re not used to working with them.

Just remember, everything needs to add up to no more than 100% or it will break the layout. Take into account margins, and padding and width of elements.

Lets start off by looking at the left sidebar layout of Twenty Eleven.

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

The sidebar class is #secondary, the post area is #content, and #primary is the area content area resides.

I want to increase the width of the left sidebar by 4%, so what we need to do is, increase the width of the sidebar, move the position of the content, and make room for the new sidebar width.

Here’s my new CSS.

.left-sidebar #primary {
    float: right;
    margin: 0 0 0 -30.4%; /* increased left margin 4% from -26.4% to -30.4% */
    width: 100%;
}
.left-sidebar #content {
    margin: 0 7.6% 0 38%; /* increased right margin 4% from 34* to 38% */
    width: 58.4%;
}
.left-sidebar #secondary {
    float: left;
    margin-left: 7.6%;
    margin-right: 0;
    margin-top: 20px;
    width: 22.8%; /* increased sidebar width 4% from 18.8% to 22.8% */
}

As you can see it’s just a matter of adjusting the sidebar width and 2 margins to compensate for the new width. You can change the width to whatever you want, just make sure you change the other two by the same amount.

91 thoughts on “Twenty Eleven Theme – Change Sidebar Width

    1. Zeaks

      Post author

      Hi J1m. That could depend on alot of things, usually it’s because there isn’t enough room for it to display where it should, but open a forum thread and I’ll take a look at your code.

      Reply
  1. Amy Hale

    Hi there, I am working on this site and I am using j query vertical mega menu to create my vertical navigation. I need to push the navigation right to the left hand edge to accommodate my layout. I can not figure out where to go to edit that. Can you help? Thanks Amy

    Reply
  2. Zeaks

    Post author

    @Hannah using the same classes will also change the sidebar width on the sidebar page template. I’ve tested the code from the tutorial in a child theme and it doesn’t cause the sidebar to drop on the sidebar page template.

    The sidebar page template does have a body class, as do all pages for WordPress so you can direct CSS at that specific page.

    Reply
  3. Aravinda

    Hi,
    I would ask you to please help me change right-sidebar width. I am really new to programming so I really dont know how to do this on right-sidebar, like you did here for the left-sidebar.

    thank you,
    Aravinda

    Reply
  4. Danielle aka Fashionista Barbie

    Hi I am just setting up the NomNom theme for my blog – and I totally want to make my right-hand sidepanel a little bigger (so it will think 300 x 250 ads in) – more like it looks on this page. I know you did the left above and I should be able to work it out – but I am totally confused none of my changes worked in the custom css panel in the theme options.

    is there any chance you can help with the css code to fix it?

    thanks

    Reply
    1. Zeaks

      Post author

      Hi Danielle,

      I’ll be updating this post in the next few days with both left and right sidebar layouts, as well as left and right sidebar layouts that reduce the padding which is what I’m using on this site.

      Reply
  5. Jelli

    Hello! I’m just beginning to design my new WP site and eventually move over from Blogger. I used this & it worked great. Just wondering how I can find the pixel values of the widths of the sidebar based on the percentages. In order to insert well-proportioned images, it’d really be helpful. Thanks!

    Reply
    1. Zeaks

      Post author

      Hi Jelli. There is a much better explanation of the Twenty Eleven layout here. http://zeaks.org/general/twenty-eleven-sidebar-width-explained-and-2-bonus-layouts/

      But it’s not hard to figure out. In Twenty Eleven style.css (for the right and left sidebar layouts) the max-width is 1000px, the rest of the layout is based around that.

      The first image in that post I linked shows the content width, sidebar width and margins between them all.
      Side Width = 1000 px wide
      Content Width – 58.4% = 584px
      Sidebar width – 18.8% = 188px
      Left of content margin – 7.6% = 76px
      right of content margin – 7.6% = 76px
      right of sidebar margin – 7.6% = 76px

      If you wanted your sidebar 300px wide that would be 30%
      Then you need to reduce the content width by 112px to make up for the wider sidebar (300-188=112px) 584px-112=472px or 47.2%

      So for a 300px wide sidebar your content width must be 47.2% and sidebar 30%

      Reply
  6. eugene

    /* Right Content */
    .left-sidebar #primary {
    float: right;
    margin: 0 0 0 -30.4%;/* increased left margin 4% from -26.4% to -30.4% */
    width: 100%;
    }
    .left-sidebar #content {
    margin: 0 7.6% 0 38%;/* increased right margin 4% from 34%* to 38% */
    width: 58.4%;
    }
    .left-sidebar #secondary {
    float: left;
    margin-left: 7.6%;
    margin-right: 0;
    margin-top:20px
    width: 22.8%;/* increased sidebar width 4% from 18.8% to 22.8% */
    }

    Reply

Leave a Reply