Bootstrap 5透明导航栏移动端切换菜单背景及logo调整求助

问题症结 #

你的原有CSS存在两个核心问题：

• 折叠菜单的背景色选择器优先级不足，且未针对移动端场景精准设置
• Logo被嵌套在折叠容器内，未添加移动端隐藏规则

修正后的完整CSS代码 #

/* 主导航栏透明样式（保留核心设置并优化） */
.navbar {
  align-items: end;
  background: transparent;
  --bs-navbar-nav-link-padding-x: 2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 120%;
  letter-spacing: 1px;
  --bs-navbar-toggler-border-color: transparent;
  position: absolute;
  padding-right: 180px;
  width: 100%;
}

/* 移动端专属样式（屏幕宽度<768px时生效） */
@media (max-width: 767px) {
  /* 设置折叠菜单背景色 */
  .navbar-collapse {
    background-color: #F7F5F0;
    padding: 1.5rem;
    margin-top: 0.5rem;
    border-radius: 4px; /* 可选：添加圆角优化视觉 */
  }

  /* 隐藏移动端折叠菜单内的Logo */
  .navbar-brand {
    display: none;
  }

  /* 调整移动端导航项间距 */
  .nav-item {
    padding-top: 10px;
  }
}

/* 通用样式保留 */
.navbar-brand {
  max-height: 60px;
  max-width: 60px;
  margin-left: 30px;
}

.nav-item {
  padding-top: 25px;
}

.nav-link {
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  color: #252525;
  padding: 5px 0;
  margin: 15px 20px;
}

/* 修复导航项靠右对齐 */
.navbar-nav {
  margin-left: auto;
}

关键修改说明 #

1. 折叠菜单背景生效：
   • 在媒体查询中直接选中.navbar-collapse设置背景色，确保覆盖Bootstrap默认样式
   • 添加内边距和外边距，避免菜单内容与背景边缘紧贴，提升可读性
2. 移动端Logo隐藏：
   • 在媒体查询中给.navbar-brand设置display:none，仅在折叠菜单场景隐藏Logo
3. 修复导航对齐：
   • 用.navbar-nav { margin-left: auto; }替代原错误的ul .nav选择器，确保桌面端导航项靠右对齐
4. 代码优化：
   • 将冗余的透明背景写法简化为background: transparent;，保持代码简洁

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