CSS Classes

This table contains all classes related to the 2 columns layout. This is a custom layout classes for 2 columns layout page requirements.

All these options can be set via following classes:

Value/Class Description
2-columns You can create 2 columns layout by adding .2-columns class in <body> tag and set data-col as 2-columns.

HTML Markup

This section contains HTML Markup to create 2 columns layout. This layout has a navigation and content sections with common header and footer.

Apex has a ready to use starter kit, you can use this layout directly by using 2-columns.html. 

<html class="loaded" lang="en">
    <head>
        ...
    </head>
    <body class="vertical-layout vertical-menu 2-columns menu-expanded" data-menu="vertical-menu" data-col="2-columns">
        <!-- Navbar starts -->
        <nav class="navbar navbar-expand-lg navbar-light header-navbar">
            ...
        </nav>
        <!-- Navbar ends -->

        <div class="wrapper">
            <!-- Menu starts -->
            <div class="app-sidebar menu-fixed" data-background-color="man-of-steel" data-image="../app-assets/img/sidebar-bg/01.jpg" data-scroll-to-active="true">
                ...
            </div>
            <!-- Menu ends -->

            <div class="main-panel">
                <div class="main-content">
                    <div class="content-overlay"></div>
                    <!-- Page Content starts -->
                    <div class="content-wrapper">
                        ...
                    </div>
                    <!-- Page Content ends -->
                </div>

                <!-- Footer starts -->
                <footer class="footer">
                    ...
                </footer>
                <!-- Footer ends -->
            </div>
        </div>
    </body>
</html>

Points to remember for vertical 2-columns layout:

  1. Set data-background-color from the gradients in Apex Color Palette for gradient background color in your menu or you may also set solid colors from the palette. Default value is set to "man-of-steel".
  2. Set data-image from app-assete/img for setting an image as a background-image in your menu.
2 Columns