diff options
| author | Minobi <unknown> | 2020-02-23 14:33:27 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2020-03-04 16:17:01 +0200 |
| commit | a99c531aa7a2d2ba1052a8250c67a7d1337745fa (patch) | |
| tree | b73d9607a004737a519e42b5068c96a0f43cd625 | |
| parent | 50c95d9b5d5b9acf33a21496c0a186f4693f7f64 (diff) | |
| download | bootstrap-a99c531aa7a2d2ba1052a8250c67a7d1337745fa.tar.xz bootstrap-a99c531aa7a2d2ba1052a8250c67a7d1337745fa.zip | |
Example dashboard: fix menu disappearing on small viewport
| -rw-r--r-- | site/content/docs/4.3/examples/dashboard/dashboard.css | 12 | ||||
| -rw-r--r-- | site/content/docs/4.3/examples/dashboard/index.html | 7 |
2 files changed, 17 insertions, 2 deletions
diff --git a/site/content/docs/4.3/examples/dashboard/dashboard.css b/site/content/docs/4.3/examples/dashboard/dashboard.css index 0893e83e6..259cf6382 100644 --- a/site/content/docs/4.3/examples/dashboard/dashboard.css +++ b/site/content/docs/4.3/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/content/docs/4.3/examples/dashboard/index.html b/site/content/docs/4.3/examples/dashboard/index.html index f030eeeff..f76df4f66 100644 --- a/site/content/docs/4.3/examples/dashboard/index.html +++ b/site/content/docs/4.3/examples/dashboard/index.html @@ -12,7 +12,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"> @@ -23,7 +26,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"> |