{% include "lib/layout/html/_header.html" { htmlClass: 'st-layout ls-top-navbar hide-sidebar' } %}
{% include "src/html/themes/layout/fluid/_navbar_brand_active.html" %} {% include "lib/layout/html/samples/_sidebar.html" { sidebarOptions: "left sidebar-size-30pc sidebar-offset-0 sidebar-skin-dark sidebar-visible-desktop sidebar-visible-mobile", sidebarData: "id=sidebar-menu data-type=dropdown" } %}

Percentage Sidebar Sizes

Apart from the predefined pixel sidebar sizes, the sidebars can also take percentage based sizes starting from 25% to 100% in 1% increments.

Back to layouts

Live Demo

Note: the sidebar will close after 5 seconds; you can also press ESC to close it manually;

All this demo does is add the appropriate classes to the sidebar container.