Utilizing the Bootstrap classes side-nav and nav-sidebar, I have created a side navigation bar. However, there is an issue - when the viewport is less than 768px, the side navigation bar disappears.
Below is the snippet of my HTML code:
<ul class="nav nav-sidebar side-nav">
<li><a href="{{ path('new_message') }}" class="glyphicon glyphicon-file brl-sidebar-icon" data-toggle="tooltip" data-placement="right" title="New post"></a></li>
<li><a href="{{ path('get_schedule') }}" class="glyphicon glyphicon-calendar brl-sidebar-icon" data-toggle="tooltip" data-placement="right" title="Schedule"></a></li>
<li><a href="{{ path('get_task') }}" class="glyphicon glyphicon-saved brl-sidebar-icon" data-toggle="tooltip" data-placement="right" title="Tasks"></a></li>
</ul>
I attempted to modify the media CSS code: initially, the nav-sidebar CSS rule was set as @media (min-width: 768px).
I experimented with changing it to min-width: 360px, however, the sidebar still vanished when the viewport width was under 768px.
Is there a different approach that should be taken in order to keep the sidebar visible regardless of the viewport width?
Thank you for your assistance!