rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Example dashboard: fix menu disappearing on small viewport

Browse Source
This commit is contained in:
Minobi 2020-02-23 14:33:27 +02:00 committed by XhmikosR
parent fa7510c6af
commit 39ac525f6e
2 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/docs/4.4/examples/dashboard/dashboard.css
View File

@ -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;

7
site/docs/4.4/examples/dashboard/index.html
View File

@ -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">