I'm currently working on a collapsible sidebar where the header shrinks to display only the letters 'J' and 'L' when collapsed. The issue I'm facing is finding the right balance between an empty header and adding in these letters.
When there is no text in the header, it fits perfectly within a 40px height. However, once I add in the letters 'J L', the header extends beyond the desired 40px height. While my CSS for the header's height is set correctly, I need to figure out a way to keep it at 40px while incorporating the strong element for the letters 'J L' to be centered.
Below are images illustrating the problem:
Before https://i.sstatic.net/g3VsA.png After https://i.sstatic.net/qck0m.png
My goal is to maintain the 40px height for the header while ensuring that the green bars continue to touch each other despite the inclusion of the strong element for 'J L'.
#sidebar.active .sidebar-header{
height:40px !important;
}
#sidebar.active .sidebar-header strong {
display:block;
}<nav id="sidebar">
<div class="sidebar-header">
<strong>J L</strong>
</div>
</nav>