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.
These two versions have the same HTML structure with some diffrent classes. For example for this page
visible-push.html there is a class
<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-hidden for all three tags.
There are two skins at the moment.
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
If you like to create a new skin, you should use LESS. Simply open the
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
First choose the effect that you like and then open
visible-overlay.html in your text editer and find
<div class="content-wrap" data-effect="dnl-overlay">.
Do you see
dnl-overlay? The default effect is
overlay (dnl-overlay). Now you can change
dnl-overlay to one of these
There is only one effect for content when the left navbar toggles. It is called "Opacity".
<div class="content-wrap"> and add
content-opacity class to it. It works for both push and overlay effects.