Change the height of the sidebar or a better way to place my Navbar

[vaibhav0806]

I used a custom navbar from NextUI to be used in my docs, due to which the Sidebar is now messed up, sidebar has a bit of a vertical scroll as you can see here

I wanted to know if there is a way to fix the height of the sidebar, or a better way to place the Navbar so that it does not affect the sidebar at all, here is the code to my public repo

Any help is appreciated at all! Thanks!

P.S. Currently my Navbar is used within the app/layout.tsx

[fuma-nama]

Yes we currently have a CSS variable to customise this on v14 (to be released this month). If it’s urgent, you will have to override the top property with CSS.

[vaibhav0806]

Yes we currently have a CSS variable to customise this on v14 (to be released this month). If it’s urgent, you will have to override the top property with CSS.

@fuma-nama just to be sure, could you redirect me to the page I should override the top property? because I don't see where the sidebar is getting rendered

[vaibhav0806]

@fuma-nama

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  sidebar={{
    banner: (
      <div>
        <h3>Nuxt Nation 2024</h3>
        <p>
          Join over 21,000 fellow Nuxt & Vue Developers to learn everything Nuxt
          has to offer in 2024!
        </p>
      </div>
    ),
  }}
/>;

I found this, I am assuming this is where I would have to edit the styles for the CSS for the sidebar, whoever, the sidebar doesn't accept ny styles property? Could you help me out a little here, it's confusing.

[fuma-nama]

You will customise the sidebar with CSS selectors (see the id attribute of sidebar on devtools, it's a aside tag).

[vaibhav0806]

Thanks, that makes so much sense! And I just tried it, it works!