Push Navigation

Quick Tips

You may remove all ID or Class names which contain _dm-, they are only used for demonstration.

Boxed Layout

Fluid Layout	Remove the `.boxed-layout` and `.centered-layout` classes from the `body`.
Centered Layout	Add a class `.centered-layout` to the `body`.
Boxed Layout	Add a class `.boxed-layout` to the `body`.
Boxed Layout with background image	Add background image to the `body`. <body class="boxed-layout" style='background-image: url("path_to_img/image.jpg");'> .. .. </body> Or it could be in your own class. .bg-img { background-image: url("path_to_img/image.jpg"); } <body class="boxed-layout bg-img"> .. .. </body>

Color Schemes

Replace the current Bootstrap CSS and Nifty CSS path with the new path of the CSS color schemes you wish to use.

This is where you can change the color scheme of your app / website.

<head>
    ...
    <title>My Project</title>
    ...

    <!-- STYLESHEETS -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--- -->

    <!-- Bootstrap CSS [ REQUIRED ] -->
    <link rel="stylesheet" href="./assets/css/color-schemes/SELECTED-SCEHEMS/bootstrap.min.css">

    <!-- Nifty CSS [ REQUIRED ] -->
    <link rel="stylesheet" href="./assets/css/color-schemes/SELECTED-SCEHEMS/nifty.min.css">

</head>

Header

Sticky header	Add a class `.hd--sticky` to the `#root`.
Expanded header	Add a class `.hd--expanded` to the `#root`.
Expanded header with overlapping content.	Add a class `.overlapping` to the `#content > .content__header`.
Disable rounded header.	Add a class `.rounded-0` to the `#content > .content__header`.

Navigation

Max navigation by default	Add a class `.mn--max` to the `#root`.
Min navigation by default	Add a class `.mn--min` to the `#root`.
OffCanvas navigation with PUSH mode by default	Add a class `.mn--push` to the `#root`.
OffCanvas navigation with SLIDE mode by default	Add a class `.mn--slide` to the `#root`.
OffCanvas navigation with REVEAL mode by default	Add a class `.mn--slide` to the `#root`.
Sticky navigation	Add a class `.mn--sticky` to the `#root`.
Create a ToggleButton for navigation	Add a class `.nav-toggler` to the button. Example :

Sidebar

Disable sidebar backdrop	Add a class `.sb--bd-0` to the `#root`.
Static position	Add a class `.sb--static` to the `#root`.
Stuck sidebar as the default mode	Add a class `.sb--stuck` to the `#root`.
Unite sidebar as the default mode	Add a class `.sb--unite` to the `#root`.
Pinned sidebar as the default mode	Add a class `.sb--pinned` to the `#root`.
Toggle visibility	Toggle the class `.sb--show` in the `#root`.
Create a ToggleButton for Sidebar	Add a class `.sidebar-toggler` to the button. Example :

Animations

Add the following class to the body to change the animation transition.

Transition function name	Class name
In Quart	`.in-quart`
Out Quart	`.out-quart`
In Back	`.in-back`
Out Back	`.out-back`
In Out Back	`.in-out-back`
easeInOutBack	`.easeInOutBack`
steps	`.steps`
jumping	`.jumping`
rubber	`.rubber`