求助：Hamburger menu下拉框未显示在按钮正下方，位置错位

API 探路者

2026-6-27

解决汉堡菜单下拉框不在按钮正下方的问题

问题分析

当前汉堡菜单的下拉框因CSS定位错误出现在页面中心而非按钮正下方，核心问题是.navbar-collapse的transform: translateX(-100%)属性将下拉框向左偏移了自身宽度，导致位置偏离按钮。

修改方案

调整CSS中.navbar-collapse的样式，移除错误偏移属性，确保下拉框定位在按钮正下方：

body {
     background: #020202!important;
 }
.navbar {
  position: relative;
  z-index: 1000;
  width: 100%; /* 确保导航栏占满页面宽度，让right:0对齐页面右侧 */
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-toggler {
  border: none;
  padding: 0;
  outline: none;
  background-color: transparent;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 24px;
  height: 24px;
}

.navbar-collapse {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.9);
  width: auto;
  white-space: nowrap;
  /* 移除导致偏移的transform属性 */
  min-width: 150px;
  margin-top: 0.5rem; /* 可选：添加间距避免和按钮重叠 */
}

.navbar-nav .nav-link {
  color: white;
  padding: 10px 20px;
}

@media (min-width: 992px) {
  .navbar-collapse {
    position: static;
    background-color: transparent;
    width: 100%;
    transform: none;
  }
}