diff options
| author | Minobi <unknown> | 2020-02-23 15:33:27 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2020-03-09 17:08:41 +0300 |
| commit | 39ac525f6e98086f406b4c2be3cf555432a506e0 (patch) | |
| tree | eeaefff4af19d997636b371f90bc89d27182297c /site/docs/4.4 | |
| parent | fa7510c6afc089ec2fa585789baabc3e3699a6dd (diff) | |
Example dashboard: fix menu disappearing on small viewport
Diffstat (limited to 'site/docs/4.4')
| -rw-r--r-- | site/docs/4.4/examples/dashboard/dashboard.css | 12 | ||||
| -rw-r--r-- | site/docs/4.4/examples/dashboard/index.html | 7 |
2 files changed, 17 insertions, 2 deletions
diff --git a/site/docs/4.4/examples/dashboard/dashboard.css b/site/docs/4.4/examples/dashboard/dashboard.css index 6b5d7b5a5a..2ca0a4e0eb 100644 --- a/site/docs/4.4/examples/dashboard/dashboard.css +++ b/site/docs/4.4/examples/dashboard/dashboard.css @@ -22,6 +22,13 @@ body { box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } +@media (max-width: 767.98px) { + .sidebar { + top: 5rem; + } +} + + .sidebar-sticky { position: relative; top: 0; @@ -88,6 +95,11 @@ body { box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); } +.navbar .navbar-toggler { + top: 4px; + right: 4px; +} + .navbar .form-control { padding: .75rem 1rem; border-width: 0; diff --git a/site/docs/4.4/examples/dashboard/index.html b/site/docs/4.4/examples/dashboard/index.html index 836e29b367..998364ae3d 100644 --- a/site/docs/4.4/examples/dashboard/index.html +++ b/site/docs/4.4/examples/dashboard/index.html @@ -9,7 +9,10 @@ extra_js: --- <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow"> - <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a> + <a class="navbar-brand col-md-2 mr-0" href="#">Company name</a> + <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> <ul class="navbar-nav px-3"> <li class="nav-item text-nowrap"> @@ -20,7 +23,7 @@ extra_js: <div class="container-fluid"> <div class="row"> - <nav class="col-md-2 d-none d-md-block bg-light sidebar"> + <nav id="sidebarMenu" class="col-md-2 d-md-block bg-light sidebar collapse"> <div class="sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> |