There are themes that are in 2 column mode where the header and footer are either on the left or on the right side like Halo, Nova, Metro, Bloom.
For such themes by default, the system has fixed the sidebar width to 250px. However, you can manage the width with the help of CSS override.
Follow these steps to alter the sidebar width:
- Copy the entire CSS override mentioned below.
<style>
.column-2-container .sidebar {width: 150px;}
.column-2-container .stage-spacing { position: relative;
margin-left: 150px; width: calc(100% - 150px);}
.halo-header .user-logo { min-width: 100px;}
</style>
Note: We have changed the width to 150px here.
- After copying the relevant code, go to Settings (1).
- In the External Scripts (2), paste the code in the <body> section (3).
- Hit the Save (4) button to save the changes in the studio.
Now, refresh the site to review the changes on the live site.