I am currently incorporating the bootstrap navbar with offcanvas functionality. All nested within a fixed positioned div.
The styling of the div is outlined below:
.whiteHeader {
position: fixed;
display: flex;
align-items: center;
height: 100px;
width: 100%;
max-width: 1400px;
top: 30px;
left: 50%;
transform: translateX(-50%);
margin: 0 auto;
padding: 10px;
background-color: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(8px);
}
The structure of the navbar in HTML appears as follows:
<nav class="navbar navbar-expand-xxl navbar-light hidden-print">
<div class="container-fluid ms-5">
// More code here...
</div>
</nav>
However, there seems to be an issue where the offcanvas is only being rendered within the whiteHeader element.
https://i.sstatic.net/cxrll.png
My objective is to have the offcanvas take up 100% of the viewport's height. Any assistance on this matter would be greatly appreciated.