diff --git a/docs/components/main-header.md b/docs/components/main-header.md
index 0ba60d7daf70ed01f14a13bc2b4c27acecde041c..79665009afe67b97b4d2264eef92fcbabdf713ce 100644
--- a/docs/components/main-header.md
+++ b/docs/components/main-header.md
@@ -15,6 +15,137 @@ title: Main Header Component
The main header contains the navbar. Construction of the navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide. The navbar can be constructed in two ways. This is an example for the normal navbar and next we will provide an example for the top nav layout with a logo too.
+
+
+
+
+
+
+
+
+
+
+
```html
@@ -29,6 +160,17 @@ The main header contains the navbar. Construction of the navbar differs slightly
Contact
+
+
+ Help
+
+
+
@@ -149,6 +291,141 @@ The main header contains the navbar. Construction of the navbar differs slightly
Top navbar example can be found in this [demo page](https://adminlte.io/themes/dev/AdminLTE/pages/layout/top-nav.html).
+
+
+
+
```html
@@ -169,6 +446,17 @@ Top navbar example can be found in this [demo page](https://adminlte.io/themes/d
Contact
+
+
+ Help
+
+
+
@@ -280,3 +568,8 @@ Top navbar example can be found in this [demo page](https://adminlte.io/themes/d
```
{: .max-height-300}
+
+
+> ##### Tip!
+> To get a bigger dropdown menu you can add `.dropdown-menu-lg` or `.dropdown-menu-xl` to `.dropdown-menu`.
+{: .quote-info}
diff --git a/docs/layout.md b/docs/layout.md
index 6f8e32dfa44f0baedf1091a00501c6c608017854..4af69b615392cbfacbb9734be8fa20cc8634fda0 100644
--- a/docs/layout.md
+++ b/docs/layout.md
@@ -24,12 +24,27 @@ AdminLTE 3.0 provides a set of options to apply to your main layout. Each one of
- Fixed Sidebar: use the class `.layout-fixed` to get a fixed sidebar.
-- Fixed Navbar: use the class `.layout-navbar-fixed` to get a navbar navbar.
-- Fixed Footer: use the class `.layout-footer-fixed` to get a navbar footer.
+- Fixed Navbar: use the class `.layout-navbar-fixed` to get a fixed navbar.
+- Fixed Footer: use the class `.layout-footer-fixed` to get a fixed footer.
- Collapsed Sidebar: use the class `.sidebar-collapse` to have a collapsed sidebar upon loading.
- Boxed Layout: use the class `.layout-boxed` to get a boxed layout that stretches only to 1250px.
- Top Navigation: use the class `.layout-top-nav` to remove the sidebar and have your links at the top navbar.
+
+##### Responsive Variations
+You can also use the following classes for responsive changes with placing
+- Fixed Navbar:
+ - use the class `.layout-*-navbar-fixed` to get a fixed navbar.
+ - use the class `.layout-*-navbar-not-fixed` to get a not fixed navbar.
+- Fixed Footer:
+ - use the class `.layout-*-footer-fixed` to get a fixed footer.
+ - use the class `.layout-*-footer-not-fixed` to get a not fixed footer.
+
+> ##### Tip!
+> If you want to use anchors with a fixed navbar, you need to add `.anchor` to you hidden anchor, e.g. ` `.
+{: .quote-info}
+
+
#### Color Variations
AdminLTE 3.0 provides a set of color variations to apply to your sidebar (light & dark) & navbar. You can combine any available color with these class prefixes:
@@ -81,3 +96,18 @@ The following colors are available:
> You can use these color variations even with `.text-*`, `.bg-*` & much more.
{: .quote-info}
+
+##### Custom Range / Switch
+For custom colored custom-range you can add this classes:
+- `.custom-range-*`
+
+For custom colored custom-switch you can add this classes:
+- `.custom-switch-off-*` (for custom switch off)
+- `.custom-switch-on-*` (for custom switch on)
+
+##### Plugin Support
+You can use the all the colors above with these plugins:
+- Bootstrap Slider
+ - `.slider-*` (wrapped around the slider)
+- iCheck-Bootstrap
+ - `.icheck-*`