Home

Filter

Category

This is one of the two versions of "Dash navbar" called hidden. There is a key difference between these versions. Back to all demos

This one is hidden on all devices and you can only open the left navbar by click on the toggle button or swipe.


Tip How these versions works:

These two versions have the same HTML structure with some diffrent classes. For example for this page hidden-push.html there is a class dnl-hidden on
<nav class="navbar navbar-static-top dash-navbar-top dnl-hidden">,
<div class="dash-navbar-left dnl-hidden"> and
<div class="content-wrap dnl-hidden" data-effect="dnl-push">.
If you like the other version (visible), simply replace dnl-hidden with dnl-visible for all three tags.


There are two skins at the moment.



Tip How to choose skins:

The default skin is dark, so if you like the dark skin, you do not need to change anything. If not change
<link href="css/dash.css" rel="stylesheet"> to <link href="css/dash-light.css" rel="stylesheet">
in this page head section.


Tip How to create my very own skin:

If you like to create a new skin, you should use LESS. Simply open the variables-light.less or variables-dark.less in LESS folder, there are tons of varibales to change, and change the variables, then compile it to CSS (e.g. dash-green.css) and add it to page as mentioned above.


There are two effects when the left navbar toggles. Click the below buttons to see the different effects.

Push Overlay

Tip How to set up one of these effects:

First choose the effect that you like and then open hidden-overlay.html in your text editer and find <div class="content-wrap" data-effect="dnl-push">.
Do you see dnl-push? The default effect is push (dnl-push). Now you can change dnl-push to one of these dnl-overlay


There is only one effect for content when the left navbar toggles. It is called "Opacity".

Tip How to set up opacity effect:

Simply find <div class="content-wrap"> and add content-opacity class to it. It works for both push and overlay effects.