嘿，刚接触一天就能动手折腾主题，给你点个赞！给Astra主题的单个导航菜单项加上图里那种圆角矩形，咱们用WordPress的「额外CSS」面板就能搞定，步骤很简单：

第一步：找到目标菜单项的专属CSS类 #

每个菜单项都有独一无二的CSS类，咱们得先找到它：

• 打开你的网站，右键点击要修改的菜单项，选择「检查」（Chrome/Firefox都有这个功能）
• 在弹出的开发者工具里，找到包裹这个菜单项的<li>标签，它的class里会有类似menu-item-xxx的内容（比如menu-item-123），把这个记下来。

第二步：编写CSS代码 #

把下面的代码复制到「额外CSS」面板，记得把menu-item-123替换成你刚才找到的实际类名，还可以根据自己的需求调整颜色、圆角大小这些参数：

/* 给目标菜单项添加圆角矩形样式 */
.menu-item-123 a {
  background-color: #2563eb; /* 对应图里的蓝色，你可以换成任何颜色值 */
  color: #ffffff !important; /* 设置白色文字，!important用来覆盖Astra的默认样式 */
  border-radius: 20px; /* 圆角的弧度，数值越大越圆 */
  padding: 8px 16px; /* 上下、左右的内边距，让矩形更饱满 */
  margin: 0 8px; /* 左右的外边距，避免和其他菜单项挤在一起 */
}

/* 鼠标悬停时的交互效果（可选，增强用户体验） */
.menu-item-123 a:hover {
  background-color: #1d4ed8; /* 悬停时换成稍深一点的蓝色 */
}

第三步：把代码添加到WordPress后台 #

• 登录你的WordPress后台，点击「外观」→「自定义」
• 在自定义面板里找到「额外CSS」选项，把刚才修改好的代码粘贴进去
• 实时预览一下效果，调整颜色、数值直到满意，最后点击「发布」就搞定啦！

小提示 #

如果这个菜单项是当前页面（比如首页），Astra会自动给它加上current-menu-item类。要是想让当前页面的菜单项也保持这个圆角样式，你可以把CSS选择器改成这样：

.menu-item-123 a, .menu-item-123.current-menu-item a {
  /* 这里放刚才的样式代码 */
}

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