How to increase the width of the sidebar?

[AndyRaphael]

I would like to increase the width of the sidebar, mainly because our navigation includes a bunch of sub folders. How can I set the width of the sidebar? I'd like it to be about 50% wider than it is at the moment.

Thank you!

[imfing]

You can customize it via custom CSS

https://imfing.github.io/hextra/docs/advanced/customization/#custom-css

[AndyRaphael]

Thank you, but I am not sure which property to set. Could you please point me to which property needs to be set?

[imfing]

you can use the browser developer tool to get the element

https://developer.chrome.com/docs/devtools/css

[AndyRaphael]

Thank you. For anybody who is interested, create a custom.css file and add the following. In this case, I increased the width from 16rem to 24rem.

@media (min-width: 768px) {

.md:w-64 {
width:24rem
}
}

[troycarlson]

heads up - this will apply to any elements which have both Tailwind classes md and w-64, which is a pretty broad selector. you probably want to use something more specific, like sidebar-container:

@media (min-width: 768px) {
  .sidebar-container {
    width: 24rem;
  }
}

[AndyRaphael]

Thank you! yes, this is much better