Making side menu thinner

[aarchuletajr]

Hello with this being the only template with a side menu, I would like to make the container for the side navigation thinner. I played around with CSS but could not figure it out.

https://archfinclient.weebly.com/

[Bernadette3]

Weebly employees are not able to assist with code edits, but thanks for posting a link to your site. Another user may be able to help you out with this. If you do edit the css/html area of your theme your site would be considered a "custom" theme. It's possible you may not be able to receive assistance from support unless you revert back to a standard Weebly theme. If you are able to add the css override to Settings>SEO>Header your site will still be a standard Weebly theme and it is much easier to troubleshoot. I.e. if you run into an issue, you can remove the code, see if the issues resolves, and the paste it back if the override was not the cause. Just something to think about when you are making these types of edits.  

[PaulMathews]

@aarchuletajr Your left-hand sidebar navigation panel is set to a fixed width of 260px. Modify the following classes in your site's css to change the panel width (to get to the css in the Code Editor, click "Theme" in the top navigation of the Site Editor then click the "Edit HTML/CSS" button at the bottom of the left-hand sidebar). Locate each class by searching for it in the css.

In the example css below, we'll change the sidebar width from the default 260px to 200px:

The sidebar navigator (left panel)

Change the width attribute from 260px to 200px (highlighted in red below):

body.nav-position-sidebar .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    min-height: 100vh;
    padding: 40px;
    border-bottom: none;
    display: flex;
    flex-direction: row;
}

The banner area (right panel)

Change the left padding attribute from 260px to 200px (highlighted in red below):

body.nav-position-sidebar .wrapper {
    background: #ffffff;
    padding-left: 200px;
    box-sizing: border-box;
}

[aarchuletajr]

@PaulMathews That is actually what I thought and tried to modify it before posting this. However, no matter what I modify the 260px to the nav width stays constant. That is why I was puzzled.

[PaulMathews · Accepted solution]

@aarchuletajr I'm presuming you added the css to the home page's Header Code in its SEO Settings. If so, you need to enclose the css in style tags. See code below (style tags highlighted in red). Ultimately, you need to make these css code changes to the site css rather than individual page css since changing the sidebar panel width is something you want site-wide not on a page by page basis.

<style>
body.nav-position-sidebar .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    min-height: 100vh;
    padding: 40px;
    border-bottom: none;
    display: flex;
    flex-direction: row;
}

body.nav-position-sidebar .wrapper {
    background: #ffffff;
    padding-left: 200px;
    box-sizing: border-box;
}
</style>

[aarchuletajr]

Thank You!