Layout Modifiers

Avenger comes packed with options for many different kinds of layouts, and for most layout options, it can be as easy as changing classes in the body tag.

This layout option allows the sidebar to scroll indipendent of the body.

To use, add the classes .sidebar-hideon-collpase.sidebar-scroll to body with the Static Page Layout.


Static Sidebar

Default. Sidebar scrolls with the body. Used with Static Page Layout


Offcanvas Infobar

To make the rightbar/infobar appear offcanvas from the right, use the class infobar-offcanvas on body


Overlay Infobar

To make the rightbar/infobar appear on top of the content, use the class infobar-overlay on body


For the breadcrumb on top of the .page-heading, use the class breadcrumb-top on body

Markup changes:

ol.breadcrumbs goes on top of div.page-heading in the Static Page Layout


Page-level Tabs

div.page-tabs>ul.nav.nav-tabs needs to be added under .page-heading.

The .tab-content and .tab-pane will go under container

Otherwise, the tabs will operate exactly like normal bootstrap tabs.


Full-Height Content

If you need a full-height scroll on your content, wrap it in a div/full-height-content


Full-Height Panel

Similar to full-height content, if you want a full-height panel, put a panel in the body with the classes

div.panel-body.panel-no-padding.panel-with-scroll>div.full-height-content panel-scroll-visible


Icon Sizes in Horizontal Navigation

While using Horizontal Navigation Layout, the default icon sizes are smaller in propertion to the text size. For large more focused icon sizes we need to use .large-icons-nav class with #horizontal-nav


Boxed Layout

To acheive the boxed layout, simply add the layout-boxed class to body. The width is set by @boxed-width in variables.less