How do I achieve a full width navbar and a sidebar which takes up the rest of the height?

[CheyenneForbes]

I've been trying to get my vuesax layout to look like the image below without success.

Basically I want a full width navbar with a sidebar which takes up the rest of the height, I want both to be fixed so they arent affected by the page's scroll

[CheyenneForbes]

• the navbar is okay, I had set its position to fixed
• I tried static-position for the sidebar but it doesnt take up the rest of the page's height and it pushes the page's content under it

---

[jsinhSolanki]

navbar will be position: fixed and sidebar will have body as parent, which you can implement from prop parent of sidebar component.

In my project I have something like this. <vs-sidebar ref="mainSidebar" parent="body" :hiddenBackground="true" default-index="-1" class="sidebarx" v-model="isSidebarActive">

initially isSidebarActive is set to true. I hope this will work.

[CheyenneForbes]

Didn't work, the top of the sidebar still isn't below the navbar

[jsinhSolanki]

For this. You need to give position: fixed to sidebar and then you will use css's calc() to get the height of your sidebar. And add margin-top to your sidedbar. sidebar css e.g. margin-top: 50px

Now your sidebar will be below your navbar. Next thing is your content-area. for that you will use margin-left because sidebar is set to position fix. So Again use calc() content-area css e.g. margin-left: calc(100% - 260px); margin-top: 50px

let me know if it worked. I think this is CSS related issue than Vuesax. But anyway this is what I suggest.

[luisDanielRoviraContreras]

@CheyenneForbes let me know if you managed to solve, thanks for the contribution

[Leftyx]

I am having the same problem. I've spend a good couple of hours but cannot find the way. Is there anyone willing to share an example ?

[rafaelcanoGit]

Bro i had that issue, after try many things the solution is the parent prop. parent="body" i hope can help you

• the navbar is okay, I had set its position to fixed
• I tried static-position for the sidebar but it doesnt take up the rest of the page's height and it pushes the page's content under it