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.
Sidebar Scroll
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
Breadcrumb on Top
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