Bootstrap 5 - make sidebar size line up with navbar brand

Issue

This page uses two navbar items, one for the top bar, and a separate one for the sidebar. How can I make it so the width of the sidebar is consistent with the end of the logo in the top right?

Using variations of col-xxl-1 etc. results in sizes that are too small or too large at various screensizes.

Thank you.

EDIT: There are several possible approaches, in the end I ignored matching the size. Using col sizes never would have worked

• Pass exact width to css class for sidebar
• set sidebar to col-auto size, and place the logo inside the sidebar but make it invisble
• have the sidebar go to the top, and the top navbar comes after. Effectively the page becomes two columns, one for sidebar one for nav+content

Solution

Instead of using one of the column sizes have you tried using a style attribute or css class to pass in the exact width?

Answered By - Thamy Bessa