¿Por qué la barra de administración de WordPress se superpone al menú de navegación? Una guía completa para solucionarlo

existe WordPress 中，网站的menú de navegaciónjunto concolumna de gestión（Admin Bar）重叠的问题是很多用户都会遇到。通常，这种问题是因为主题的 CSS 没有考虑到管理栏的高度，导致导航菜单在视觉上被遮盖。本文会详细分析这一问题的原因，根据实际情况选择适合的修复方法。

导致 WordPress 管理栏与导航菜单重叠的常见原因

下面是一些可能导致导航菜单被管理栏遮盖的原因：

1. Conflicto temático：某些主题的 CSS 未正确处理管理栏的高度，可能导致导航菜单位置显示不正确。
2. conflicto de plug-ins：一些插件（例如 Mega 菜单插件或头部横幅插件）可能会引入影响前端布局的 CSS 或 JavaScript，从而导致导航菜单位置出现错误。
3. CSS personalizado：如果手动添加了自定义 CSS，也可能影响导航菜单的显示，尤其是当自定义样式未能考虑到管理栏的存在时。

如何识别问题？

可以观察导航菜单，通常会看到菜单项难以点击，或者菜单的一部分被遮盖。此问题不仅影响用户体验，还会让用户在浏览网站时感到不方便。了解了原因后，有几种不同的解决方案，我们一起往下看看！

解决方案 1：通过用户资料设置隐藏管理栏

如果想快速修复重叠问题，不想涉及到代码的修改，可以选择在前端隐藏管理栏。这一方法适合新手和不会 CSS 或没有主题编辑权限的用户。

mover

1. Acceda a la administración de WordPress：进入 WordPress 后台仪表盘。

2. 导航到用户设置：在侧边栏中，点击 用户 > 我的资料.

3. 取消勾选工具栏选项: en barra de herramientas (en software informático) 部分，取消勾选 查看站点时显示工具栏 Las opciones.

4. Guardar cambios: Click 更新个人资料 Guarde los ajustes.

为什么有效

隐藏管理栏后，前端不再显示管理栏，从而避免了导航菜单被遮盖。这种方法不涉及代码修改，因此不会影响站点的其他布局设置。

Atención:这个方法只适用于当前用户，其他用户需要登录他们的帐户再重复上述的步骤。

解决方案 2：手动调整主题的 CSS

如果对 CSS 有一定的了解，要彻底解决这一问题，可以通过手动调整主题的 CSS 来修复菜单重叠问题。

mover

1. 检查问题区域

• Abra el menú Herramientas para desarrolladores（右键单击导航菜单，选择 sonda tal vez Elementos de control).

• 在开发者工具中，找到导航菜单或网站头部区域的 CSS 类或 ID，记录下相关信息，以便稍后用于自定义 CSS 调整。

2. 安装 WPCode 插件

WPCode 插件可以帮助添加自定义 CSS，同时提供条件逻辑功能，让代码仅对登录用户生效。

• Navegue hasta Plugins > Instalar Plugins，搜索并安装 WPCode 插件。

• Después de activar el plugin, vaya a 代码片段 > 添加代码片段y luego seleccione 添加自定义代码 y seleccione Fragmento de código CSS.

3. 添加自定义 CSS

在代码编辑器中输入以下代码片段：

#your-menu-id .your-menu-class {
    margin-top: 40px; /* 调整该数值以适应主题 */
    z-index: 10001;
    position: relative;
    padding-top: 40px;
}
#your-menu-id .your-menu-class {
    margin-top: 40px; /* 调整该数值以适应主题 */
    z-index: 10001;
    position: relative;
    padding-top: 40px;
}
#your-menu-id .your-menu-class {
    margin-top: 40px; /* 调整该数值以适应主题 */
    z-index: 10001;
    position: relative;
    padding-top: 40px;
}

llamar la atención sobre algo: Will #your-menu-id responder cantando .your-menu-class 替换为实际的导航菜单 ID 和类名。

这段代码通过 margin-top responder cantando padding-top 调整菜单的位置，并设置 z-index 值为 10001，使其在管理栏之上显示。position: relative 保证了 z-index 的作用有效。

4. 启用条件逻辑

向下滚动至 lógica condicional inteligente (ICL)，启用逻辑条件，并设置为仅在登录用户的情况下应用。

5. 保存并激活代码片段

golpe (en el teclado) Guardar fragmentos de código 并将状态切换为 active。这样一来，CSS 代码就只会在登录用户访问网站时生效，避免对前端访客的影响。

为什么有效

问题通常源于主题的 CSS 未能考虑管理栏的高度。通过添加此自定义 CSS，可以确保导航菜单在管理栏之上显示，从而解决菜单重叠的问题。

解决方案 3：检查插件冲突

如果上述解决方案均未解决问题，插件冲突可能是导致导航菜单重叠的原因。某些插件可能会引入 CSS 或 JavaScript 代码，干扰主题的布局设置。

mover

1. Desactive todos los plug-ins

• 在 WordPress 管理后台中，前往 Plugins > Plugins instalados.
• 勾选所有插件，然后从批量操作下拉菜单中选择 desactivarHaga clic en aparato.

2. 测试问题是否消失

停用所有插件后，检查导航菜单是否恢复正常。如果重叠问题消失，说明其中某个插件可能导致了冲突。

3. 逐一启用插件，定位问题插件

逐个启用插件，并在每次启用后刷新页面，观察问题是否重新出现。通过这种方法，可以找到导致冲突的具体插件。

4. 解决冲突

确认冲突插件后，可以尝试联系插件开发者请求支持，或者查找其他相似功能的插件以替代该插件。

Preguntas frecuentes

1. 是否有更快的修复方法？
如果不想在前端显示管理栏，可以简单地通过用户资料隐藏它，这样能够立刻避免重叠问题。

2. 自定义 CSS 会影响网站性能吗？
一般来说，少量的自定义 CSS 不会显著影响网站性能。但要确保只在必要时应用该 CSS 代码，以免产生不必要的加载。

3. 什么是 z-index，为什么在这里使用它？
z-index 是一种控制元素堆叠顺序的 CSS 属性。通过给导航菜单设置较高的 z-index，可以确保它在页面上方显示，而不是被管理栏遮盖。

resúmenes

WordPress 管理栏与导航菜单的重叠问题可以通过多种方式解决。可以选择隐藏管理栏作为快捷修复，或者通过自定义 CSS 更加精确地调整菜单位置，甚至检查插件冲突来根除问题。无论选择哪种方法，这些步骤都能帮助解决导航菜单的正常显示，提升网站的用户体验。