Layout Modifiers - Avenger

# 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

« Previous Next »