居中对齐标题菜单：Wordpress（Avada 主题）自定义 CSS

Posted 2023-03-05

【中文标题】居中对齐标题菜单：Wordpress（Avada 主题）自定义 CSS

【英文标题】：Align Header Menu in the center: Wordpress (Avada Theme) Custom CSS

【发布时间】：2016-12-26 06:08:39

【问题描述】：

在我的网站 (www.eibenhof.at) 上，我希望顶部的标题菜单位于中间，目前它位于右侧。 （我还将删除徽标，以便只有文本位于中心）。但是，没有选择 Avada 主题将其置于中心位置。

首先，我试图在 Avada 论坛中查找我可以使用的特定自定义 CSS 代码，我发现了这个：

.fusion-main-menu float:none !important;
.fusion-main-menu > ulfloat:none !important; text-align:center !important;
.fusion-main-menu > ul > li,.fusion-main-menu > ul > li > afloat:none !important; display:inline-block !important;
.fusion-main-menu > ul ultext-align:left !important;

但是，此代码对我不起作用。它把一切都放在中心，但它把一切都搞砸了！然后我尝试只使用“display:inline”而不是“display:inline-block”，它看起来还不错，但是我不能再点击子菜单项了。

帮助？我将不胜感激！

【问题讨论】：

我很确定 Avada 主题已经有一个设置，您可以将导航移动到中心..

不，不幸的是

【参考方案1】：

添加css这个类

.fusion-headertext-align:center;
.fusion-main-menu
float:right;/*remove this property*/
/* or */
float:inherit;
display:inline-block;


.fusion-is-sticky .fusion-sticky-menu-1 .fusion-sticky-menu 
    display: inline-block;

【讨论】：

太棒了！谢谢。第一个： .fusion-headertext-align:center; .fusion-main-menu float:right; .fusion-is-sticky .fusion-sticky-menu-1 .fusion-sticky-menu display: inline-block; 不工作！但是第二个版本 (.fusion-headertext-align:center; .fusion-main-menu float:inherit; display:inline-block; .fusion-is-sticky .fusion-sticky-menu-1 。 fusion-sticky-menu display: inline-block; 做到了！还有一件事：我希望子菜单中的文本仍然向左对齐，而不是在中心 - 这怎么可能？跨度>

添加这个css .sub-menu li a text-align: left;

好的，谢谢，那行得通。还有一件事：一旦我应用代码 - 子菜单不再与主菜单完全对齐，它有点在主菜单内，而不是完美地连接到它。这是为什么呢？