我可以制作侧边栏和响应式顶部导航栏，但在较小的视口（移动设备，平板电脑）上，侧边栏不会根据顶部导航栏的位置调整其位置。
我使用固定值将其固定在左侧，但这也使其无法在较小的屏幕上调整高度，顶部导航栏和侧边栏内容区域之间出现间隙
调整大小时如何使此侧边栏响应为顶部导航栏？
这是我的代码：
https://www.codeply.com/go/XHDeSP3Fzv
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dorami - Nền tảng quản lý bán hàng và kho vận</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
nav div ul li a.nav-link {
color: white;
padding: 1rem;
}
nav div ul li a.nav-link:hover {
background-color: #004d40;
}
body {
padding-top: 50px;
padding-left: 80px;
}
.navbar {
background-color: #00695c;
}
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 60px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 50px; /* Stay at the top */
left: 0;
background-color: #4e342e; /* Black */
overflow-x: auto; /* Disable horizontal scroll */
}
.sidenav a {
text-decoration: none;
font-size: 16px;
color: white;
display: block;
padding: 20px 0;
}
.sidenav a:hover {
background-color: #3e2723;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm py-0">
<a class="navbar-brand" href="/dashboard/">
<img src="/images/logo.webp" width="40" height="40" alt="">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-2">
<a class="nav-link" href="#">Shop Manager</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Customer Care</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Messenger Order</a>
</li>
</ul>
</div>
</nav>
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
我在调整屏幕尺寸时没有看到间隙。但是，我看到移动菜单按钮下拉并阻塞了侧栏上的第一个链接。您可以进行媒体查询并调整顶部：50px的值以说明主导航栏的高度增加。