如何调整侧边栏位置，避免其覆盖顶部导航栏？

问题：页面中的垂直侧边栏点击展开时会从屏幕顶部延伸到底部，覆盖顶部导航栏的Logo和名称。希望侧边栏从导航栏下方开始显示，移除padding-top:60px后没有效果。

原始HTML代码 #

<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid d-flex justify-content-between p-0">
            <a class="navbar-brand d-flex align-items-center" asp-controller="Home" asp-action="Index">Your .NET Core Application</a>
            <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
        </div>
    </nav>

    <div id="mySidebar" class="sidebar">
         <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
        <a onclick='closeNav()' href="#">About</a>
         <a href="#">Services</a>
        <a href="#">Clients</a>
         <a href="#">Contact</a>
   </div>
</body>

原始JavaScript代码 #

<script>
        function openNav() {
            document.getElementById("mySidebar").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
        }

        function closeNav() {
            document.getElementById("mySidebar").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
        }
</script>

原始CSS样式 #

<style>
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: lightblue;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
</style>

解决方案 #

问题核心是position: fixed的侧边栏默认top:0，会从屏幕顶部开始渲染，padding-top仅能让侧边栏内的内容下移，容器本身仍会覆盖导航栏。需要修改以下CSS属性：

1. 将侧边栏的top值设为导航栏的高度（Bootstrap默认navbar高度为56px），同时用calc(100% - 56px)设置高度，确保侧边栏不会超出屏幕底部。
2. 调整关闭按钮的top值，避免它跑到导航栏区域。
3. 可按需调整padding-top，让侧边栏内容和顶部保持合理间距。

修改后的CSS代码：

.sidebar {
  height: calc(100% - 56px); /* 屏幕高度减去导航栏高度 */
  width: 0;
  position: fixed;
  z-index: 1;
  top: 56px; /* 从导航栏下方开始渲染 */
  left: 0;
  background-color: lightblue;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 20px; /* 调整内容顶部间距，可选 */
}

.sidebar .closebtn {
  position: absolute;
  top: 10px; /* 调整关闭按钮位置，避免被导航栏遮挡 */
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* 其他原有样式保持不变 */

如果你的导航栏高度不是56px，可根据实际数值调整top和height中的参数。修改后侧边栏会从导航栏下方开始显示，不再覆盖导航栏的Logo和名称。

内容的提问来源于stack exchange，提问作者cool