Home

Filter

Category

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

This one is visible on large devices and becomes togglable on small deveices. So you see the left navbar on large devices and on small devices you can toggle the left navbar with the the icon before the brand on top navbar.


Tip How these versions works:

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