Page Structure
The theme is fluid layout with 12 columns. The left sidebar is removed from the grid and is fixed. The right sidebar appears is also not a part of the grid. All content should go inside .container
.
Static Page Layout
<!DOCTYPE html>
<html lang="en">
<head>
<!--all stylesheet links -->
</head>
<body class="[INFOBAR STYLE]">
<header class="navbar navbar-default navbar-fixed-top clearfix" role="banner">
<!-- header content -->
</header>
<div id="wrapper">
<div id="layout-static">
<div class="static-sidebar-wrapper">
<div class="static-sidebar">
<div class="sidebar">
<!-- sidebar links and widgets -->
</div>
</div>
</div>
<div class="static-content-wrapper">
<div class="static-content">
<div class="page-content">
<div class="page-heading">
<h1>Page Title</h1>
</div>
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
</ol>
<div class="container">
<!-- all content goes here -->
</div>
</div>
</div>
<footer><!-- footer --></footer>
</div>
</div>
</div>
<div class="infobar-wrapper">
<div id="widgetarea">
<!-- all rightbar widgets here -->
</div>
</div>
<!--all script tags -->
</body>
</html>
Avenger provides multiple infobar styles, along with other layout options that can be activated by adding classes to the body. To see those options, please take a look at the Layout Modifiers section.
Horizontal Navigation
General markup styles can for horizontal navigation can be achieved by using the horizontal-nav
class on the body and some markup changes.
<!DOCTYPE html>
<html lang="en">
<head>
<!--all stylesheet links -->
</head>
<body class="infobar-offcanvas horzintal-nav">
<body class="infobar-offcanvas horizontal-nav">
<div id="wrapper">
<header class="navbar navbar-default navbar-fixed-top clearfix" role="banner">
<!-- header content -->
</header>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#horizontal-navbar">
<i class="fa fa-navicon"></i>
</button>
</div>
<div class="collapse navbar-collapse large-icons-nav" id="horizontal-navbar">
<ul class="nav navbar-nav">
<!-- navigation items -->
</ul>
</div>
</nav>
<div class="static-content">
<div class="page-content">
<div class="page-heading">
<h1>Page Title</h1>
</div>
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
</ol>
<div class="container">
<!-- all content goes here -->
</div>
</div>
</div>
</div>
<footer><!-- footer --></footer>
<div class="infobar-wrapper">
<div id="widgetarea">
<!-- all rightbar widgets here -->
</div>
</div>
<!--all script tags -->
</body>
</html>
Fixed Sidebar Navigation
The jQuery Layout Plugin can create complex layouts, which we used to create fixed header and sidebar layouts in Avenger which is separated from rest of the body. You can read more about the plugin in their homepage. However, if you want the much simpler option to only have sidebar scroll with the static layout, check the Layout Modifiers section.
<!DOCTYPE html>
<html lang="en">
<head>
<!--all stylesheet links -->
</head>
<body class="fixed-header">
<header class="navbar navbar-default navbar-fixed-top clearfix" role="banner">
<!-- header content -->
</header>
<div id="layout-fixed">
<div class="ui-layout-west fixed-sidebar-wrapper">
<div class="fixed-sidebar">
<div class="sidebar">
<!-- sidebar links and widgets -->
</div>
</div>
</div>
<div class="ui-layout-center">
<div class="fixed-content-wrapper">
<div class="fixed-content">
<div class="page-content">
<div class="page-heading">
<h1>Page Title</h1>
</div>
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
</ol>
<div class="container">
<!-- all content goes here -->
</div>
</div>
</div>
<footer><!-- footer --></footer>
</div>
</div>
<div class="ui-layout-east infobar-wrapper">
<div id="widgetarea">
<!-- all rightbar widgets here -->
</div>
</div>
</div>
<!--all script tags -->
<script src="assets/js/jquery.layout.min.js"></script>
</body>
</html>
Navigation Controls
Sidebar Navigation
For primary navigation controls you may use the markup provided below. Refer to the Fixed/Static Sidebar sections.
<nav role="navigation" class="widget-body">
<ul class="acc-menu">
<li><a href="index.html"><i class="fa fa-home"></i><span>Dashboard</span><span class="badge badge-dark">1</span></a></li>
<li><a href="javascript:;"><i class="fa fa-columns"></i><span>Layouts</span><span class="badge badge-dark">2</span></a>
<ul class="acc-menu">
<li><a href="link.html">Menu Item #1</a></li>
<li><a href="link.html">Menu Item #2</a></li>
<li><a href="link.html">Menu Item #3</a></li>
<li><a href="link.html">Menu Item #4</a></li>
</ul>
</li>
</ul>
</nav>
Horizontal Navigation
For primary navigation controls you may use code in this format. Refer the Horizontal Navigation section. In all cases, the code should be wrapped with the #horizontal-navbar
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
<li><a href="#"><i class="fa fa-columns"></i> <span>Layout</span></a></li>
<li><a href="#"><i class="fa fa-group"></i> <span>Members</span></a></li>
<li><a href="#"><i class="fa fa-pencil"></i> <span>Components</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle='dropdown'><i class="fa fa-cog"></i> <span>Settings <i class="fa fa-angle-down"></i></span></a>
<ul class="dropdown-menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>
</li>
</ul>