[Silk UI Web] Sidebar - Changing Width

[Silk UI Web] Sidebar - Changing Width

Forge Component
Published on 14 Jun by Labs
64 votes
Published on 14 Jun by Labs
We are using The Lisbon theme with the right sidebar.  We would like to make the width of the sidebar smaller.  I know I can change the ".Sidebar" tag(s) in the CSS from 300px to 250px (see CSS below).  But when the "desktop" is displayed, there is still a 50px gap between the MainContent and the Sidebar.  What CSS setting am I missing, or what is the easiest way to change the width of the sidebar?  The Phone/Tablet/Small Desktop views all appear to be working fine.

/* Sidebar **********************************/
.Sidebar {
    right: -270px;
    width: 250px;

.desktop.small .Sidebar,
.tablet .Sidebar {
    right: -250px;

.desktop.small .Sidebar.open,
.tablet .Sidebar.open {
    -webkit-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
            transform: translateX(-250px);
Have you used your browser's developer tools? Inspect Element will show you precisely what the inheritance is and where a partciular property is being set from.

Thanks Justin... found the other setting needed to shrink the sidebar.  Needed to change the "margin-right" to match the ".Sidebar" width:
/* If we use sidebar */
.desktop:not(.small).UseSidebar .Content {
    margin-right: 250px;