点击汉堡菜单后Navbar未以块级形式显示的技术问题

要解决点击汉堡菜单后导航链接仍以行内超链接形式呈现的问题，核心是给展开状态下的导航链接设置块级样式，具体操作如下：

步骤1：修改移动端CSS样式 #

在你的移动端媒体查询代码中，为展开状态的导航链接添加块级显示规则：

/* 请确保此代码在移动端媒体查询（比如@media (max-width: 768px)）内 */
.nav-links.active a {
  display: block;
  width: 100%;
  padding: 0.8rem 0;
  border-bottom: 1px solid #e0e0e0;
}

• display: block：将默认行内的<a>标签转为块级元素，使其占满父容器宽度，实现垂直排列
• padding：增加上下内边距，让链接更易点击，同时贴合预期效果的视觉间距
• border-bottom：添加底部分隔线，区分每个导航项，和预期效果一致

步骤2：确认JS类名绑定正确 #

确保你的汉堡菜单点击事件能正确给导航容器（比如.nav-links）添加/移除active类，这样上述CSS规则才能生效。

相关截图说明 #

• 原HTML/CSS代码截图：展示了Navbar的基础结构与初始样式
• 移动端CSS代码截图：当前的移动端媒体查询配置
• 预期效果截图：导航链接垂直排列，每项占满整行，带有分隔线
• 实际效果截图：导航链接仍横向挤在一起，保持超链接默认的行内布局

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