Hello this is demo page for the left sidebar.
Resize the page and test the behavior.
<div class="ric-layout__large-content--with-sidebar">
<nav class="ric-sidebar">
<ul class="ric-sidebar__list">
<li><h4 class="ric-sidebar__menu_heading">Menu heading 1</h4>
<ul class="ric-sidebar__list">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</li>
</ul>
</nav>
<main class="ric-layout__main">
...
</main>
</div>
The left sidebar can becomes hidden when the screen is smaller than 960px. To activate this behavior you
need to add .ric-sidebar--responsive
class on the body.
Then to open the sidebar you need to toggle the .ric-sidebar--opened
class on the body.
Any element with the .ric-sidebar__opener
class will do that automatically for you. E.g.:
Fake content to enable scrolling
Maecenas blandit mauris sit amet velit hendrerit porta. Aenean id turpis condimentum, scelerisque sapien vel, convallis orci. Sed malesuada iaculis facilisis. Quisque sit amet pharetra urna. Vestibulum aliquam ligula ex. In interdum purus ac facilisis pulvinar.
Nulla non lorem nec mauris ornare pellentesque. Maecenas molestie ornare sapien, ac tristique orci pulvinar in. Suspendisse vel faucibus nibh, vel luctus lectus. Curabitur non turpis quis quam tincidunt malesuada. Aenean rutrum arcu sed arcu vestibulum
sit amet imperdiet mi molestie. Vestibulum fermentum, dui placerat sodales vestibulum, sapien ex tincidunt ipsum, vel volutpat ante dui iaculis diam. Nullam sit amet metus et velit hendrerit aliquam in condimentum risus. Nullam id lacus maximus, suscipit sapien quis, sollicitudin quam. Vestibulum imperdiet lacus a fringilla dapibus.
Nulla non lorem nec mauris ornare pellentesque. Maecenas molestie ornare sapien, ac tristique orci pulvinar in. Suspendisse vel faucibus nibh, vel luctus lectus. Curabitur non turpis quis quam tincidunt malesuada. Aenean rutrum arcu sed arcu vestibulum
sit amet imperdiet mi molestie. Vestibulum fermentum, dui placerat sodales vestibulum, sapien ex tincidunt ipsum, vel volutpat ante dui iaculis diam. Nullam sit amet metus et velit hendrerit aliquam in condimentum risus. Nullam id lacus maximus, suscipit sapien quis, sollicitudin quam. Vestibulum imperdiet lacus a fringilla dapibus.