Twenty Fifteen side bar menu smaller

In the Twenty Fifteen theme, how can i adjust the left side bar menu thinner so I get more space on the right side to display more contents and information on the website?


  • Luís
    • Support

    Hi CHAD ,

    Hope you're doing well today!

    In the style.css (found inside "wp-content/themes/twentyfifteen") you will find this code:

    .sidebar {
        float: left;
        margin-right: -100%;
        max-width: 413px;
        position: relative;
        width: 29.4118%;


    .site-content {
      display: block;
      float: left;
      margin-left: 29.4118%;
      width: 70.5882%;

    You can adjust the "width" property to best fit your needs. However, we always suggest to create a child theme to don't lose these changes on an update.

    Also, we have a cool article in our blog about how to customize Twenty Fifteen, that I think it may interest you:

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • CHAD
    • The Incredible Code Injector

    Luis, I appreciated for brought up the child theme idea and i think I should do that. But honestly I am absolutely not good at doing this unless there is step by step to show me how. I am afraid that I might mess up my parent them.

    I know you send me a link about creating a child them. Is there some thing else better step by step that show me how to create this child them? Sorry:slight_frown:

  • CHAD
    • The Incredible Code Injector

    also Luis, if I copy those code you given above into my Custom CSS (by going to appearance/custom CSS of my parent theme) and do my adjustment in there, do I still need to create a child theme as long as I don't make any adjustment in my cpanel
    ( "wp-content/themes/twentyfifteen")?

  • Rupok
    • Support Ninja

    Hi CHAD,

    Just to make sure we are on the same page, we are talking about this site, right?

    If yes, then you can use the following custom CSS code in your "Additional CSS" section inside your theme customizer:

    .site-content {
      margin-left: 10%;
    .sidebar {
      width: 17%;

    You can play with the number 10% and 17% to get your desired result.

    And as you will be using these code in your Additional CSS section, you won't need to create a child theme.

    Or if you don't wanna risk it after theme update (though I don't think this customization will be gone with theme update), you can simply install and activate Simple Custom CSS plugin. It will create a "Custom CSS" section under your Appearance menu in your dashboard. Go there, paste the custom CSS code I just provided and save. That will do it. This won't be gone even when you update your theme, plugin or even the WordPress core. This way will be easier for you as what you want is simply a design change, not any advanced functionality change or template override of your theme.

    Please let us know if you still have any confusion. We will be glad to help.

    Have a nice day. Cheers!

  • Nithin
    • Support Wizard

    Hi CHAD,

    I used SiteOrigin CSS plugin, is that the same as Simple Custom CSS?

    Yes, you could make use of SiteOrigin CSS plugin, both the plugins has same feature. With the latest version of WordPress 4.7, you can even add custom CSS, via the Customizer, located under Appearance > Customize , and selecting Additional CSS in the customizer, hence reducing the use of an extra plugin.

    Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.