Removing the Sidebar Indents

If you downloaded Vogue from this site, this article doesn’t apply to you. However, if you applied Vogue from within the Shopify admin, you may choose to make this simple modification.

I’ve had several questions about removing the indent of the lists in the sidebar. Fortunately, this is an easy modification.

Navigation & Blog Entries
Open your stylesheet (stylesheet.css, caramel.css and/or sea.css), locate the section called @group Global Styles, then highlight the following section…

ul, ol {
    margin-bottom: 10px;
}

ul li {
    margin-left: 25px;
    padding: 1px 0;
    list-style-type: disc;
    list-style-position: outside;
}

ol li {
    margin-left: 25px;
    padding: 1px 0;
    list-style-type: decimal;
    list-style-position: outside;
}

and replace with…

ul, ol {
    margin-bottom: 15px;
}

ul li {
    padding: 2px 0 2px 15px;
    list-style-type: disc;
    list-style-position: inside;
}

ol li {
    padding: 2px 0 2px 15px;
    list-style-type: decimal;
    list-style-position: inside;
}

Save. While we just took care of the navigation list and weblog entries, we still need to shift the Featured Product list to the left as well.

Featured Products
Still in your stylesheet, locate the following block of code…

ul#featuring li {
    padding: 4px 20px;
    list-style-type: none;
    list-style-position: outside;
    margin: 0;
}

and change to…

ul#featuring li {
    padding: 4px 0;
    list-style-type: none;
    list-style-position: outside;
}

Save your stylesheet once again to update your theme with the new changes.

Complete
That should do it. Head over to your shop and if you did everything correctly, the sidebar contents should all be left aligned.