Utilizing bootstrap 4, I have successfully implemented a partially collapsible sidebar that is functioning as intended.
However, my current challenge lies in incorporating a top header/nav bar that includes the toggle for collapsing the sidebar, and on the right side of the navbar, I aim to include a user icon for login/logout functionalities.
To address this, I have created a header named #userHeader, which expands the width of the page and accommodates the toggle (working well so far). The issue arises when using the 100vw property for the header, resulting in excessive width that extends off the page, obscuring the icon.
My query is: How can I create a responsive header that dynamically adjusts its width based on the remaining space left by the sidebar?
In simpler terms, when the sidebar occupies 15% of the page when expanded and 5% when collapsed, how can the header adapt accordingly while keeping the user icon fixed to the right side of the page?
The specific HTML block under consideration:
#userHeader {
width: 100vw;
height: 40px;
background-color: red;
position: fixed;
}
#userHeader i {
color: #FFFFFF;
float: right;
}<div id="secondHeader">
<!--Note: I have no styling for this id yet-->
<div id="userHeader">
<button type="button" id="sidebarCollapse" class=".btn">
<span></span>
<span></span>
<span></span>
</button>
<i id="user" class="far fa-user-circle fa-2x"></i>
</div>
</div>For a live demonstration of the code, please refer to the Codepen link provided below. Please note that only essential HTML elements are retained, with all CSS and JavaScript intact: